1. 組件通信

我們知道Angular2應用程序實際上是有很多父子組價組成的組件樹，因此，了解組件之間如何通信，特別是父子組件之間，對編寫Angular2應用程序具有十分重要的意義，通常來講，組件之間的交互方式主要有如下幾種：

l 使用輸入型綁定，把數據從父組件傳到子組件

l 通過 setter 攔截輸入屬性值的變化

l 使用 ngOnChanges 攔截輸入屬性值的變化

l 父組件監聽子組件的事件

l 父組件與子組件通過本地變量互動

l 父組件調用 ViewChild

l 父組件和子組件通過服務來通訊

本文會通過講解著幾種方式來對組件之間的通信做一個大致的介紹。

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 方法來監測輸入屬性值的變化并做出回應。我們改造以上的子組件來響應對應的變化，在這個示例中，我們監聽了輸入數據的變化，采取的對應動作僅僅是輸出對應的信息，當然你也可以做很多其他的事情。