父子組件交互方式，這裏介紹主要的三種方式

1.事件傳值

下面以列表頁和分頁組件舉例。

list.component.html

1 <pagination *ngIf="pageParams?.total>0" [pageParams]="pageParams" (changePageData)="changePageData($event)"></pagination>
2 /* 這裏的ngIf是為了控制total，當total從接口獲取到了返回值以後再顯示分頁組件 */

list.component.ts

1 @Component({
2     templateUrl: ‘./list.component.html‘
 
3 })
4 export class ListComponent {
5     changePageData(event) {
6         this.pageParams = event;
7         this.getPageData()  // 從分頁組件獲取page參數後重新獲取list數據
8     }
9 }

pagination.component.html

import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from ‘@angular/core‘;
@Component({
    template: `
 
<button (click)="nextPage()">點我下一頁<`
})
export class PaginationComponent {
    @Input() pageParams: any;
    // EventEmitter是一個幫你實現觀察者模式的對象，用於管理一系列訂閱者並向其發布事件的對象
    @Output() changePageData: EventEmitter<any> = new EventEmitter;
    nextPage() {
        this.pageParams.pageNo += 1;
        this.changePageData.emit(this.pageParams)  // 廣播事件給父組件，觸發父組件事件，可以emit參數過去
    }
}
 

2.局部變量

3.@ViewChild

Angular2 之父子組件交互方式