angular4學習記錄 -- 組件通信、生命週期

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策略是當組件的輸入屬性發生變動時纔會檢查當前組件及其子組件。