我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种：
使用输入型绑定，把数据从父组件传到子组件
通过 setter 拦截输入属性值的变化
使用 ngOnChanges 拦截输入属性值的变化
父组件监听子组件的事件
父组件与子组件通过本地变量互动
父组件调用 ViewChild
父组件和子组件通过服务来通讯
本文会通过讲解着几种方式来对组件之间的通信做一个大致的介绍。
2. 输入型绑定
输入型绑定指的是利用模板语法中的属性型绑定方式，将父组件的数据传递到子组件对应的对象中，子组件中的对象一般使用@Input装饰器来修饰，作为数据的接受者，例如
@Component({ selector: 'child', template: 'I am fron {{input}}' }) export class ChildComponent implements OnInit { @Input() input; constructor() { } ngOnInit() { } } @Component({ selector: 'parent', template: '<child [input]="data"></child>' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } }
以上的例子我们可以看出，存在父子两个组件，在父组件ParentComponent中的模板中引入了<child [input]="data"></child>子组件，并将data数据通过属性绑定的方式绑定到input属性中传入到子组件中，子组件中通过@Input()注解修饰input属性来接收传入的数据，并显示在模板I am fron {{input}}中。
输入型绑定是从父组件传递数据到子组件最常见的方式。
3. setter监听
我们知道，Angular2是一个MVVM的框架，当数据发生变化时能够同步显示到模板视图中，可以使用一个输入属性的 setter 函数，以拦截父组件中值的变化，并采取行动。例如，我们改造上面的例子，子组件中使用set，get重写对应的绑定input属性，当输入值方式变化时输出一个控制台信息。
@Component({ selector: 'child', template: 'I am fron {{data}}' }) export class ChildComponent implements OnInit { _input:string; @Input() public set input(v : string) { this._input = v; console.log(v); } public get input() : string { return this._input; } constructor() { } ngOnInit() { } }
4. ngOnChanges
除了上面说的setter函数可以响应输入数据的变化外，Angular2还提供了一个生命周期函数ngOnChanges 可以监听数据的变化。使用 OnChanges 生命周期钩子接口的 ngOnChanges 方法来监测输入属性值的变化并做出回应。我们改造以上的子组件来响应对应的变化，在这个示例中，我们监听了输入数据的变化，采取的对应动作仅仅是输出对应的信息，当然你也可以做很多其他的事情。
@Component({ selector: 'child', template: 'I am fron {{data}}' }) export class ChildComponent implements OnInit, OnChanges { _input: string; @Input() public set input(v: string) { this._input = v; console.log(v); } public get input(): string { return this._input; } constructor() { } ngOnInit() { } ngOnChanges(changes: SimpleChanges) { console.log(changes); } }
5. 事件传播
上面的集中方式都是父组件如何向子组件传递数据以及子组件如何监听数据的变化，事件传播则是子组件如何向父组件通信的一种方式。子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits( 向上弹射 ) 事件。父组件绑定到这个事件属性，并在事件发生时作出回应。子组件的 EventEmitter 属性是一个 输出属性 ，通常带有 @Output 装饰器 。
@Component({ selector: 'child', template: ` I am fron {{data}}<br /> <button (click)="click()">click for out</button> ` }) export class ChildComponent implements OnInit, OnChanges { _input: string; @Input() public set input(v: string) { this._input = v; console.log(v); } public get input(): string { return this._input; } @Output() output:EventEmitter<string> = new EventEmitter<string>(); click(){ this.output.emit("i am from child"); } constructor() { } ngOnInit() { } ngOnChanges(changes: SimpleChanges) { console.log(changes); } } @Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)"></child>' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event){ console.log($event); } }