此文章是用markdown书写,赋值全部到vscode打开即可。
# Angular组件通信

## 、父组件传递数据到子组件

- `@Input`:属性绑定,父组件向子组件传递数据

```js
// 父组件
import { Component } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: `
<div>
<child-component [conent]="toChild"></child-component>
</div>
`,
styles: ``
})
export class AppComponent {
toChild: any = 'data from parent';
constructor() {}
}
``` ```js
// 子组件
import {Component, Input} from '@angular/core'; @Component({
selector: 'child-component',
templateUrl: `
<div>
<span>{{conent}}</span>
</div>
`,
styles: ``
}) export class childComponent {
@Input() conent: any;
constructor() {
// 输出: data from parent
console.log(this.conent);
}
}
``` ## 二、子组件传递数据到父组件 - `@Output`:事件绑定,子组件向父组件传递数据的同时触发事件 ```js
// 父组件
import { Component } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: `
<div>
<child-component (onSendData)="getChildData($event)"></child-component>
</div>
`,
styles: ``
})
export class AppComponent { getChildData(e: any) {
// 输出:data from child
console.log(e)
}
}
``` ```js
// 子组件
import {Component, EventEmitter, Output} from '@angular/core'; @Component({
selector: 'child-component',
templateUrl: `
<div>
<button (click)="handlerClick()">发送</button>
</div>
`,
styleUrls: []
}) export class childComponent {
@Output() onSendData: EventEmitter<any> = new EventEmitter();
constructor() {} handlerClick(): void {
this.onSendData.emit('data from child');
} }
``` ## 三、订阅 - `Subject`:一种特殊类型的 `Observable`,允许将值多播到多个观察者 `Observer` ```js
// EventBusService
import { Injectable } from '@angular/core';
import { Subject, Observable } from "rxjs"; @Injectable({ providedIn: 'root' })
export class EventBusService {
constructor() { } private message$ = new Subject<CommonMessage>(); sendMessage(message: CommonMessage) {
this.message$.next(message);
} clearMessage() {
this.message$.next();
} getMessage(): Observable<CommonMessage> {
return this.message$.asObservable();
}
} class CommonMessage {
public type: string;
public data: Object;
} ``` ```js
import { Component } from '@angular/core';
import { EventBusService } from '../eventBusService.service'; @Component({
selector: 'app-componentOne',
templateUrl: './componentOne.component.html',
styleUrls: ['./componentOne.component.css']
})
export class ComponentOneComponent implements OnInit { constructor(private eventBus: EventBusService) {} ngOnInit() {} sendMessage(): void { // 发送消息
this.eventBus.sendMessage({
type: '',
data: {}
});
} clearMessage(): void { // 清除消息
this.eventBus.clearMessage();
} }
``` ```js
import { Component, OnInit } from '@angular/core';
import { EventBusService } from '../eventBus.service'; @Component({
selector: 'app-componentTwo',
templateUrl: './componentTwo.component.html',
styleUrls: ['./componentTwo.component.css']
})
export class ComponentTwoComponent implements OnInit {
valueChanges:any;
constructor(private eventBus: EventBusService) { } ngOnInit() {
this.valueChanges = this.eventBus.getMessage().subscribe(res => {
// 输出:{type: '', data: {}}
console.log(res);
})
} ngOnDestroy() {
// 取消订阅
this.valueChanges.unsubscribe();
} } ```

angular6组件通信的更多相关文章

  1. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  2. Angular2 组件通信

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  3. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  4. Intent进行组件通信的一些体会

    Intent进行组件通信的原理 l  Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...

  5. 进程外组件通信之免注册com通信【原创】

    最近在搞进程外组件通信的东西,写了个demo,免注册的,一直没调通,其实就是两个问题卡了好几天,也没找到有用的资料,试了好几天终于才解决,现简单记录下来,免得大家跟我走一样的弯路.下面com端程序名称 ...

  6. vue2.0 组件通信

    组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...

  7. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  8. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  9. vue子父组件通信

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...

随机推荐

  1. 解决kali linux 2016.2实体机安装后root用户没有声音

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:(1)在终端执行命令:systemctl --user enable pulseaudio (2)在/e ...

  2. Singleton and Prototype Bean Scope in Spring

    Scope描述的是Spring容器如何新建Bean的实例的. 1> Singleton: 一个Spring容器只有一个Bean的实例,此为Spring的默认配置,全容器共享一个实例. 2> ...

  3. 用.NET Core实现一个类似于饿了吗的简易拆红包功能

      需求说明 以前很讨厌点外卖的我,最近中午经常点外卖,因为确实很方便,提前点好餐,算准时间,就可以在下班的时候吃上饭,然后省下的那些时间就可以在中午的时候多休息一下了. 点餐结束后,会有一个好友分享 ...

  4. 随时发布:REST API文档的代码仓库中的持续集成与协作

    本文主要内容:API文档提供了预测客户成功的关键路径:在代码附近的文档上进行协作可以更好地检查代码和文档文件,提高自动化效率,并专门针对文档进行质量测试:提供通用文档框架,标准,自动化和工具,以提高团 ...

  5. Linux嵌入式GDB调试环境搭建

    ======================= 我的环境 ==========================PC 端: CPU:x86_64, 系统:Ubuntu,IP:172.16.2.212开发 ...

  6. HDU 3879 && BZOJ 1497:Base Station && 最大获利 (最大权闭合图)

    http://acm.hdu.edu.cn/showproblem.php?pid=3879 http://www.lydsy.com/JudgeOnline/problem.php?id=1497 ...

  7. Codeforces 755C:PolandBall and Forest(并查集)

    http://codeforces.com/problemset/problem/755/C 题意:该图是类似于树,给出n个点,接下来p[i]表示在树上离 i 距离最远的 id 是p[i],如果距离相 ...

  8. java的封神之路[转载]

    一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...

  9. 线性表的顺序存储C++代码实现

      关于线性表的概念,等相关描述请参看<大话数据结构>第三章的内容, 1 概念   线性表list:零个或多个数据的有限序列.   可以这么理解:糖葫芦都吃过吧,它就相当于一个线性表,每个 ...

  10. C# 创建Windows服务demo

    一.准备工作 1.操作系统:Windows 10 X64 2.开发环境:VS2017 3.编程语言:C# 4. .NET版本:.NET Framework 4.5 二.创建Windows Servic ...