生命周期函數(shù)
通俗的講就是組件創(chuàng)建装悲、組件更新、組件銷毀的時候會觸發(fā)的一系列的方法尚氛。 當 Angular 使用構造函數(shù)新建一個組件或指令后诀诊，就會按下面的順序在特定時刻調用這些 生命周期鉤子方法。
官方文檔：https://www.angular.cn/guide/lifecycle-hooks
- 1.constructor:構造函數(shù)中除了使用簡單的值對局部變量進行初始化 之外阅嘶，什么都不應該做属瓣。（非生命周期函數(shù)）
- 2.ngOnChanges(): 當 Angular（重新）設置數(shù)據(jù)綁定輸入屬性時響應。 該 方法接受當前和上一屬性值的 SimpleChanges 對象 當被綁定的輸入屬性的值發(fā)生變化時調用讯柔，首次調用一 定會發(fā)生在 ngOnInit() 之前抡蛙。
- 3.
ngOnInit():在 Angular 第一次顯示數(shù)據(jù)綁定和設置指令/組件的輸 入屬性之后，初始化指令/組件魂迄。 在第一輪 ngOnChanges() 完成之后調用粗截，只調用一次。 使用 ngOnInit() 有兩個原因： 1捣炬、在構造函數(shù)之后馬上執(zhí)行復雜的初始化邏輯 2熊昌、在 Angular 設置完輸入屬性之后，對該組件進行準備湿酸。有經驗的開發(fā)者會認同組件的構建應該很便宜和安全婿屹。- 4.ngDoCheck():檢測，并在發(fā)生 Angular 無法或不愿意自己檢測的變 化時作出反應推溃。在每個 Angular 變更檢測周期中調用昂利， ngOnChanges() 和 ngOnInit() 之后。
- 5.ngAfterContentInit():當把內容投影進組件之后調用美莫。第一次 ngDoCheck() 之 后調用页眯，只調用一次。
- 6.ngAfterContentChecked():每次完成被投影組件內容的變更檢測之后調用厢呵。 ngAfterContentInit() 和每次 ngDoCheck() 之后調用窝撵。
- 7.
ngAfterViewInit():初 始 化 完 組 件 視 圖 及 其 子 視 圖 之 后 調 用 。 第 一 次 ngAfterContentChecked() 之后調用襟铭，只調用一次碌奉。- 8.ngAfterViewChecked():每次做完組件視圖和子視圖的變更檢測之后調用。 ngAfterViewInit()和每次 ngAfterContentChecked() 之后 調用寒砖。
- 9.
ngOnDestroy():當 Angular 每次銷毀指令/組件之前調用并清掃赐劣。在這 兒反訂閱可觀察對象和分離事件處理器，以防內存泄 漏哩都。在 Angular 銷毀指令/組件之前調用魁兼。
export class LifecycleComponent{
@Input('title') title:string;
public msg:string='我是一個生命周期演示';
public userinfo:string='';
public oldUserinfo:string='';
constructor() {
console.log('00構造函數(shù)執(zhí)行了---除了使用簡單的值對局部變量進行初始化之外，什么都不應該做')
}
ngOnChanges() {
console.log('01ngOnChages執(zhí)行了---當被綁定的輸入屬性的值發(fā)生變化時調用(父子組件傳值的時候會觸發(fā))');
}
ngOnInit() {
console.log('02ngOnInit執(zhí)行了--- 請求數(shù)據(jù)一般放在這個里面');
}
ngDoCheck() {
//寫一些自定義的操作
console.log('03ngDoCheck執(zhí)行了---檢測漠嵌，并在發(fā)生 Angular 無法或不愿意自己檢測的變化時作出反應');
if(this.userinfo!==this.oldUserinfo){
console.log(`你從${this.oldUserinfo}改成${this.userinfo}`);
this.oldUserinfo = this.userinfo;
}else{
console.log("數(shù)據(jù)沒有變化");
}
}
ngAfterContentInit() {
console.log('04ngAfterContentInit執(zhí)行了---當把內容投影進組件之后調用');
}
ngAfterContentChecked() {
console.log('05ngAfterContentChecked執(zhí)行了---每次完成被投影組件內容的變更檢測之后調用');
}
ngAfterViewInit(): void {
console.log('06 ngAfterViewInit執(zhí)行了----初始化完組件視圖及其子視圖之后調用（dom操作放在這個里面）');
}
ngAfterViewChecked() {
console.log('07ngAfterViewChecked執(zhí)行了----每次做完組件視圖和子視圖的變更檢測之后調用');
}
ngOnDestroy() {
console.log('08ngOnDestroy執(zhí)行了····');
}
//自定義方法
changeMsg(){
this.msg="數(shù)據(jù)改變了";
}
}
