angular4學(xué)習(xí)記錄 -- 組件通訊、生命周期

shadajin 發(fā)布于2019-08-21 16:45 / 461人閱讀

摘要：每完成被投影組件內(nèi)容發(fā)生變化時(shí)調(diào)用。每次做完組件視圖和子組件視圖的變更檢測(cè)之后調(diào)用。組件銷毀時(shí)調(diào)用，主要用于內(nèi)存回收。策略策略是當(dāng)組件的輸入屬性發(fā)生變更時(shí)才會(huì)檢查當(dāng)前組件及其子組件。

angular4 組件通訊、生命周期 主要通訊形式

父組件通過(guò)屬性綁定到子組件，子組件通過(guò)事件傳遞參數(shù)到父組件

父組件通過(guò)局部變量獲取子組件的引用

父組件使用@ViewChild獲取子組件的引用

兩個(gè)不相關(guān)聯(lián)的組件使用中間人模式交互

終極大招:創(chuàng)建一個(gè)服務(wù)注入到組件中

直接把父組件當(dāng)做服務(wù)注入到子組件中

組件的輸入輸出屬性

輸入輸出屬性必須是在有父子關(guān)系的組件間使用

輸入屬性

@Input() 
private keyword: string;

輸出屬性

@Output()
searchResult: EventEmmiter = new EventEmmiter();

使用中間人模式傳遞數(shù)據(jù) 組件生命周期以及angular的變化發(fā)現(xiàn)機(jī)制 生命周期

constructor

構(gòu)造函數(shù)。

ngOnchanges

綁定屬性發(fā)生變化的時(shí)候調(diào)用，第一次調(diào)用一定在ngOnInit之前。

ngOninit

第一輪ngChanges之后調(diào)用，本鉤子只調(diào)用一次。

ngDoCheck

在ngOnInit和ngDoCheck之后，會(huì)一直檢查。

ngAfterContentInit

當(dāng)內(nèi)容投影進(jìn)組件之后調(diào)用。第一次ngDoCheck之后調(diào)用，只調(diào)用一次，只適用于組件。父組件調(diào)用完成之后，所有子組件才會(huì)調(diào)用。

ngAfterContentChecked

每完成被投影組件內(nèi)容發(fā)生變化時(shí)調(diào)用。ngAfterContentInit和ngDocheck之后調(diào)用，只適用于組件。父組件調(diào)用完成之后，所有子組件才會(huì)調(diào)用。

ngAfterViewInit

初始化完成組件試圖及其子視圖之后調(diào)用。第一次ngAfterContentChecked之后調(diào)用，只調(diào)用一次，只適用于組件。所有子組件調(diào)用完成之后，父組件才會(huì)調(diào)用。此階段更改屬性的值會(huì)報(bào)錯(cuò)，可在settimeout后運(yùn)行。

ngAfterViewChecked

每次做完組件視圖和子組件視圖的變更檢測(cè)之后調(diào)用。ngAfterViewInit和ngAfterContentChecked之后調(diào)用，只適用于組件。所有子組件調(diào)用完成之后，父組件才會(huì)調(diào)用。此階段更改屬性的值會(huì)報(bào)錯(cuò)，可在settimeout后運(yùn)行。

ngDoDestory

組件銷毀時(shí)調(diào)用，主要用于內(nèi)存回收。路由跳轉(zhuǎn)時(shí)組件會(huì)銷毀。

執(zhí)行順序：

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

ngDoCheck
    ↓
ngAfterContentChecked
    ↓
ngAfterViewChecked
    ...
ngDestory

angular的變化發(fā)現(xiàn)機(jī)制 default策略

無(wú)論變更發(fā)生在哪個(gè)組件上，zone.js都將會(huì)檢查整個(gè)angular組件樹，從根組件appComponent開始，直至所有組件全部檢查完成。

onpush策略

onpush策略是當(dāng)組件的輸入屬性發(fā)生變更時(shí)才會(huì)檢查當(dāng)前組件及其子組件。