angular4 元件通訊、生命週期

主要通訊形式

1. 父元件通過屬性繫結到子元件，子元件通過事件傳遞引數到父元件
2. 父元件通過區域性變數獲取子元件的引用
3. 父元件使用@ViewChild獲取子元件的引用
4. 兩個不相關聯的元件使用中間人模式互動
5. 終極大招:建立一個服務注入到元件中
6. 直接把父元件當做服務注入到子元件中

元件的輸入輸出屬性

輸入輸出屬性必須是在有父子關係的元件間使用

輸入屬性

@Input() 
private keyword: string;

輸出屬性

@Output()
searchResult: EventEmmiter<any> = new EventEmmiter();

使用中間人模式傳遞資料

元件生命週期以及angular的變化發現機制

生命週期

• constructor

  建構函式。

• ngOnchanges

  繫結屬性發生變化的時候呼叫，第一次呼叫一定在ngOnInit之前。

• ngOninit

  第一輪ngChanges之後呼叫，本鉤子只呼叫一次。

• ngDoCheck

  在ngOnInit和ngDoCheck之後，會一直檢查。

• ngAfterContentInit

  當內容投影進元件之後呼叫。第一次ngDoCheck之後呼叫，只呼叫一次，只適用於元件。父元件呼叫完成之後，所有子元件才會呼叫。

• ngAfterContentChecked

  每完成被投影元件內容發生變化時呼叫。ngAfterContentInit和ngDocheck之後呼叫，只適用於元件。父元件呼叫完成之後，所有子元件才會呼叫。

• ngAfterViewInit

  初始化完成元件試圖及其子檢視之後呼叫。第一次ngAfterContentChecked之後呼叫，只呼叫一次，只適用於元件。所有子元件呼叫完成之後，父元件才會呼叫。此階段更改屬性的值會報錯，可在settimeout後執行。

• ngAfterViewChecked

  每次做完元件檢視和子元件檢視的變更檢測之後呼叫。ngAfterViewInit和ngAfterContentChecked之後呼叫，只適用於元件。所有子元件呼叫完成之後，父元件才會呼叫。此階段更改屬性的值會報錯，可在settimeout後執行。

• ngDoDestory

  元件銷燬時呼叫，主要用於記憶體回收。路由跳轉時元件會銷燬。
  

執行順序：

constructor
    ↓
ngOnChanges
    ↓  
ngOnInit
    ↓
ngDoCheck
    ↓
ngAfterContentInit
    ↓
ngAfterContentChecked
    ↓
ngAfterViewInit
    ↓
ngAfterViewChecked

ngDoCheck
    ↓
ngAfterContentChecked
    ↓
ngAfterViewChecked
    ...
ngDestory

angular的變化發現機制

default策略

無論變更發生在哪個元件上，zone.js都將會檢查整個angular元件樹，從根元件appComponent開始，直至所有元件全部檢查完成。

onpush策略

onpush策略是當元件的輸入屬性發生變更時才會檢查當前元件及其子元件。