Angular開發實踐（四）：組件之間的交互
在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。
根據數據的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過服務傳遞三種交互方法。
父組件向子組件傳遞
子組件通過@Input裝飾器定義輸入屬性，然後父組件在引用子組件的時候通過這些輸入屬性向子組件傳遞數據，子組件可通過setter或ngOnChanges()來截聽輸入屬性值的變化。
先定義兩個組件，分別為子組件DemoChildComponent和父組件DemoParentComponent.
子組件：
@Component({
selector: ‘demo-child‘ 子組件通過@Input()定義輸入屬性paramOne和paramTwo（屬性值可以為任意數據類型）
父組件：
@Component({
selector: ‘demo-parent‘,
template 父組件在其模板中通過選擇器demo-child引用子組件DemoChildComponent，並通過子組件的兩個輸入屬性paramOne和paramTwo向子組件傳遞數據，最後在子組件的模板中就顯示傳遞給paramOne的數據
傳遞給paramTwo的數據這兩行文本。
通過 setter 截聽輸入屬性值的變化
在實際應用中，我們往往需要在某個輸入屬性值發生變化的時候做相應的操作，那麽此時我們需要用到輸入屬性的 setter 來截聽輸入屬性值的變化。
我們將子組件DemoChildComponent進行如下改造：
@Component({
selector: ‘demo-child‘,
template: `
<p>{{paramOneVal}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent {
private paramOneVal: any;
@Input()
set paramOne (val: any) { // 輸入屬性1
this.paramOneVal = val;
// dosomething
};
get paramOne () {
return this.paramOneVal;
};
@Input() paramTwo: any; // 輸入屬性2
}在上面的代碼中，我們可以看到通過paramOne屬性的 setter 將攔截到的值val賦值給內部私有屬性paramOneVal，達到父組件傳遞數據給子組件的效果。當然，最重要的是，在 setter 裏面你可以做更多的其它操作，程序的靈活性就更強了。
通過ngOnChanges()來截聽輸入屬性值的變化
通過 setter 截聽輸入屬性值的變化的方法只能對單個屬性值變化進行監視，如果需要監視多個、交互式輸入屬性的時候，這種方法就顯得力不從心了。而通過使用 OnChanges 生命周期鉤子接口的 ngOnChanges() 方法（當組件通過@Input裝飾器顯式指定的那些變量的值變化時調用）就可以實現同時監視多個輸入屬性值的變化。
在子組件DemoChildComponent新增ngOnChanges：
@Component({
selector: ‘demo-child‘,
template: `
<p>{{paramOneVal}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent implements OnChanges {
private paramOneVal: any;
@Input()
set paramOne (val: any) { // 輸入屬性1
this.paramOneVal = val;
// dosomething
};
get paramOne () {
return this.paramOneVal;
};
@Input() paramTwo: any; // 輸入屬性2
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
for (let propName in changes) { // 遍歷changes
let changedProp = changes[propName]; // propName是輸入屬性的變量名稱
let to = JSON.stringify(changedProp.currentValue); // 獲取輸入屬性當前值
if (changedProp.isFirstChange()) { // 判斷輸入屬性是否首次變化
console.log(`Initial value of ${propName} set to ${to}`);
} else {
let from = JSON.stringify(changedProp.previousValue); // 獲取輸入屬性先前值
console.log(`${propName} changed from ${from} to ${to}`);
}
}
}
}新增的ngOnChanges方法接收的參數changes是以輸入屬性名稱為鍵、值為SimpleChange的對象，SimpleChange對象含有當前輸入屬性是否第一次變化、先前值、當前值等屬性。因此在ngOnChanges方法中通過遍歷changes對象可監視多個輸入屬性值並進行相應的操作。
獲取父組件實例
前面介紹的都是子組件通過@Input裝飾器定義輸入屬性，這樣父組件可通過輸入屬性將數據傳遞給子組件。
當然，我們可以想到一種更主動的方法，那就是獲取到父組件實例，然後調用父組件的某個屬性或方法來獲取需要的數據。考慮到每個組件的實例都會添加到註入器的容器裏，因此可通過依賴註入來找到父組件的示例。
子組件獲取父組件實例相比於父組件獲取子組件實例（直接通過模板變量、@ViewChild或@ViewChildren獲取）要麻煩一些。
要在子組件中獲取父組件的實例，有兩種情況：
已知父組件的類型
這種情況可以直接通過在構造函數中註入DemoParentComponent來獲取已知類型的父組件引用，代碼示例如下：
@Component({ selector: ‘demo-child‘, template: ` <p>{{paramOne}}</p> <p>{{paramTwo}}</p> ` }) export class DemoChildComponent { paramOne: any; paramTwo: any; constructor(public demoParent: DemoParentComponent) { // 通過父組件實例demoParent獲取數據 this.paramOne = demoParent.paramOneVal; this.paramTwo = demoParent.paramTwoVal; } }未知父組件的類型
一個組件可能是多個組件的子組件，有時候無法直接知道父組件的類型，在Angular中，可通過
類—接口（Class-Interface）的方式來查找，即讓父組件通過提供一個與類—接口標識同名的別名來協助查找。首先創建DemoParent抽象類，它只聲明了
paramOneVal和paramTwoVal屬性，沒有實現（賦值），示例代碼如下：export abstract class DemoParent { paramOneVal: any; paramTwoVal: any; }然後在
父組件DemoParentComponent的providers元數據中定義一個別名 Provider，用 useExisting 來註入父組件DemoParentComponent的實例，代碼示例如下：@Component({ selector: ‘demo-parent‘, template: ` <demo-child [paramOne]=‘paramOneVal‘ [paramTwo]=‘paramTwoVal‘></demo-child> `, providers: [{provider: DemoParent, useExisting: DemoParentComponent}] }) export class DemoParentComponent implements DemoParent { paramOneVal: any = ‘傳遞給paramOne的數據‘; paramTwoVal: any = ‘傳遞給paramTwo的數據‘; }然後在子組件中就可通過DemoParent這個標識找到父組件的示例了，示例代碼如下：
@Component({ selector: ‘demo-child‘, template: ` <p>{{paramOne}}</p> <p>{{paramTwo}}</p> ` }) export class DemoChildComponent { paramOne: any; paramTwo: any; constructor(public demoParent: DemoParent) { // 通過父組件實例demoParent獲取數據 this.paramOne = demoParent.paramOneVal; this.paramTwo = demoParent.paramTwoVal; } }
子組件向父組件傳遞
依然先定義兩個組件，分別為子組件DemoChildComponent和父組件DemoParentComponent.
子組件：
@Component({
selector: ‘demo-child‘,
template: `
<p>子組件DemoChildComponent</p>
`
})
export class DemoChildComponent implements OnInit {
readyInfo: string = ‘子組件DemoChildComponent初始化完成！‘;
@Output() ready: EventEmitter = new EventEmitter<any>(); // 輸出屬性
ngOnInit() {
this.ready.emit(this.readyInfo);
}
}父組件：
@Component({
selector: ‘demo-parent‘,
template: `
<demo-child (ready)="onReady($event)" #demoChild></demo-child>
<p>
<!-- 通過本地變量獲取readyInfo屬性，顯示：子組件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChild.readyInfo}}
</p>
<p>
<!-- 通過組件類獲取子組件示例，然後獲取readyInfo屬性，顯示：子組件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChildComponent.readyInfo}}
</p>
`
})
export class DemoParentComponent implements AfterViewInit {
// @ViewChild(‘demoChild‘) demoChildComponent: DemoChildComponent; // 通過模板別名獲取
@ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通過組件類型獲取
ngAfterViewInit() {
console.log(this.demoChildComponent.readyInfo); // 打印結果：子組件DemoChildComponent初始化完成！
}
onReady(evt: any) {
console.log(evt); // 打印結果：子組件DemoChildComponent初始化完成！
}
}父組件監聽子組件的事件
子組件暴露一個 EventEmitter 屬性，當事件發生時，子組件利用該屬性 emits(向上彈射)事件。父組件綁定到這個事件屬性，並在事件發生時作出回應。
在上面定義好的子組件和父組件，我們可以看到：
子組件通過@Output()定義輸出屬性ready，然後在ngOnInit中利用ready屬性的 emits(向上彈射)事件。
父組件在其模板中通過選擇器demo-child引用子組件DemoChildComponent，並綁定了一個事件處理器(onReady())，用來響應子組件的事件($event)並打印出數據（onReady($event)中的$event是固定寫法，框架(Angular)把事件參數(用 $event 表示)傳給事件處理方法）。
父組件與子組件通過本地變量（模板變量）互動
父組件不能使用數據綁定來讀取子組件的屬性或調用子組件的方法。但可以在父組件模板裏，新建一個本地變量來代表子組件，然後利用這個變量來讀取子組件的屬性和調用子組件的方法。
在上面定義好的子組件和父組件，我們可以看到：
父組件在模板demo-child標簽上定義了一個demoChild本地變量，然後在模板中獲取子組件的屬性：
<p>
<!-- 獲取子組件的屬性readyInfo，顯示：子組件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChild.readyInfo}}
</p>父組件調用@ViewChild()
本地變量方法是個簡單便利的方法。但是它也有局限性，因為父組件-子組件的連接必須全部在父組件的模板中進行。父組件本身的代碼對子組件沒有訪問權。
如果父組件的類需要讀取子組件的屬性值或調用子組件的方法，就不能使用本地變量方法。
當父組件類需要這種訪問時，可以把子組件作為 ViewChild，註入到父組件裏面。
在上面定義好的子組件和父組件，我們可以看到：
父組件在組件類中通過@ViewChild()獲取到子組件的實例，然後就可以在模板或者組件類中通過該實例獲取子組件的屬性：
<p>
<!-- 通過組件類獲取子組件示例，然後獲取readyInfo屬性，顯示：子組件DemoChildComponent初始化完成！ -->
readyInfo: {{demoChildComponent.readyInfo}}
</p>ngAfterViewInit() {
console.log(this.demoChildComponent.readyInfo); // 打印結果：子組件DemoChildComponent初始化完成！
}通過服務傳遞
Angular的服務可以在模塊註入或者組件註入（均通過providers註入）。
在模塊中註入的服務在整個Angular應用都可以訪問（除惰性加載的模塊）。
在組件中註入的服務就只能該組件和其子組件進行訪問，這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。
下面的示例就以在組件中註入的服務來進行父子組件之間的數據傳遞：
通訊的服務：
@Injectable()
export class CallService {
info: string = ‘我是CallService的info‘;
}父組件：
@Component({
selector: ‘demo-parent‘,
template: `
<demo-child></demo-child>
<button (click)="changeInfo()">父組件改變info</button>
<p>
<!-- 顯示：我是CallService的info -->
{{callService.info}}
</p>
`,
providers: [CallService]
})
export class DemoParentComponent {
constructor(public callService: CallService) {
console.log(callService.info); // 打印結果：我是CallService的info
}
changeInfo() {
this.callService.info = ‘我是被父組件改變的CallService的info‘;
}
}子組件：
@Component({
selector: ‘demo-child‘,
template: `
<button (click)="changeInfo()">子組件改變info</button>
`
})
export class DemoChildComponent {
constructor(public callService: CallService) {
console.log(callService.info); // 打印結果：我是CallService的info
}
changeInfo() {
this.callService.info = ‘我是被子組件改變的CallService的info‘;
}
}上面的代碼中，我們定義了一個CallService服務，在其內定義了info屬性，後面將分別在父子組件通過修改這個屬性的值達到父子組件互相傳遞數據的目的。
然後通過DemoParentComponent的providers元數據數組提供CallService服務的實例，並通過構造函數分別註入到父子組件中。
此時，通過父組件改變info按鈕或子組件改變info按鈕在父組件或子組件中改變CallService服務的info屬性值，然後在頁面可看到改變之後對應的info屬性值。
Angular開發實踐（四）：組件之間的交互