Angular生命週期

2021-10-17 14:43:34 字數 1616 閱讀 5068

元件特有的鉤子

ngonchanges - 當資料繫結輸入屬性的值發生變化時呼叫

ngoninit - 在第一次 ngonchanges 後呼叫

ngdocheck - 自定義的方法,用於檢測和處理值的改變

ngaftercontentinit - 在元件內容初始化之後呼叫

ngaftercontentchecked - 元件每次檢查內容時呼叫

ngafterviewinit - 元件相應的檢視初始化之後呼叫

ngafterviewchecked - 元件每次檢查檢視時呼叫

ngondestroy - 指令銷毀前呼叫

export class lifecirclecomponent 

ngonchanges()

ngoninit()

ngdocheck()

ngaftercontentinit()

ngaftercontentchecked()

ngafterviewinit() : void

ngafterviewchecked()

ngondestroy()

//自定義方法

changemsg()

}

import  from '@angular/core';

@component(}

`,}) name: string = '';

constructor(public elementref: elementref)

}

//  父元件中 傳遞title屬性給header子元件
此時改變title會觸發ngonchanges生命週期,並且也會觸發

(官方解釋)使用ngoninit()方法執行以下初始化任務。

在建構函式外部執行複雜的初始化。元件的構造應該既便宜又安全。比如,你不應該在元件建構函式中獲取資料。當在測試中建立元件時或者決定顯示它之前,你不應該擔心新元件會嘗試聯絡遠端伺服器。

ngoninit()是元件獲取初始資料的好地方。比如,英雄之旅教程 。

在 angular 設定好輸入屬性之後設定元件。建構函式應該只把初始區域性變數設定為簡單的值。

請記住,只有在構造完成之後才會設定指令的資料繫結輸入屬性。如果要根據這些屬性對指令進行初始化,請在執行ngoninit()時設定它們。

import  from '@angular/core';

@component(} `})

export class childcomponent implements oninit

ngoninit()

}

(官方解釋)

ngondestroy()方法也可以用來通知應用程式的其它部分,該元件即將消失。 

angular生命週期

指令和元件的例項有乙個生命週期 新建 更新和銷毀。通過實現乙個或多個 angularcore庫里定義的生命週期鉤子介面,開發者可以介入該生命週期中的這些關鍵時刻。每個介面都有唯一的乙個鉤子方法,它們的名字是由介面名再加上ng字首構成的。比如,oninit介面的鉤子方法叫做ngoninit,angul...

angular 生命週期

以下排序是按見面載入時的順利載入,如果直接寫ngdocheck 就要執行4次他的子方法 constructor ngonchanges changes changes void 元件中巢狀的 的內容的變化髒值檢查 ngaftercontentchecked void 元件檢視渲染完成,可以安全的操作...

angular 元件生命週期

紅色方法是用來檢測變化 ngonchanges 當angular 重新 設定資料繫結輸入屬性時響應。該方法接受當前和上一屬性值的 changes 物件 當被繫結的輸入屬性的值發生變化時呼叫,首次呼叫一定會發生在 ngoninit 之前。ngoninit 在angular第一次顯示資料繫結和設定指令 ...