Angular 個人深究（四）【生命週期鉤子】

阿新 • • 發佈：2018-11-11

Angular 個人深究（四）【生命週期鉤子】

定義：

每個元件都有一個被 Angular 管理的生命週期。

Angular 建立它，渲染它，建立並渲染它的子元件，在它被繫結的屬性發生變化時檢查它，並在它從 DOM 中被移除前銷燬它。

Angular 提供了生命週期鉤子，把這些關鍵生命時刻暴露出來，賦予你在它們發生時採取行動的能力。

除了那些元件內容和檢視相關的鉤子外,指令有相同生命週期鉤子。

概覽：

ngOnChanges()	當 Angular（重新）設定資料繫結輸入屬性時響應。該方法接受當前和上一屬性值的 SimpleChanges 物件當被繫結的輸入屬性的值發生變化時呼叫，首次呼叫一定會發生在 `ngOnInit()` 之前。
ngOnInit()	在 Angular 第一次顯示資料繫結和設定指令/元件的輸入屬性之後，初始化指令/元件。在第一輪 `ngOnChanges()` 完成之後呼叫，只調用一次。
ngDoCheck()	檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。在每個 Angular 變更檢測週期中呼叫，`ngOnChanges()` 和 `ngOnInit()` 之後。
ngAfterContentInit()	當把內容投影進元件之後呼叫。第一次 `ngDoCheck()` 之後呼叫，只調用一次。
ngAfterContentChecked()	每次完成被投影元件內容的變更檢測之後呼叫。 `ngAfterContentInit()` 和每次 `ngDoCheck()` 之後呼叫
ngAfterViewInit()	初始化完元件檢視及其子檢視之後呼叫。第一次 `ngAfterContentChecked()` 之後呼叫，只調用一次。
ngAfterViewChecked()	每次做完元件檢視和子檢視的變更檢測之後呼叫。 `ngAfterViewInit()` 和每次 `ngAfterContentChecked()` 之後呼叫。
ngOnDestroy()	當 Angular 每次銷燬指令/元件之前呼叫並清掃。在這兒反訂閱可觀察物件和分離事件處理器，以防記憶體洩漏。在 Angular 銷燬指令/元件之前呼叫。

範例：

　　ngOnChanges()、ngInit

test2.component.ts

// test2.component.ts:

import { Component, OnInit,Input } from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
//需要繼承 OnInit、OnChanges 介面
export class Test2Component implements OnInit OnChanges{
// 兩個input 來自 父元件 test1
	@Input() test2_value1: string;
	@Input() test2_value2: string;
  constructor() { }
  ngOnInit() {
　　　　　　　　　　//判斷 ngOnInit的執行順序
		console.log("這裡執行ngOnInit");
  }
	ngOnChanges(changes:SimpleChanges){
		console.log(changes);
		for (let propName in changes) {
			let chng = changes[propName];
			let cur  = JSON.stringify(chng.currentValue);
			let prev = JSON.stringify(chng.previousValue);
			console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
		}
	}
}

　test1.component.html

<!-- test1.component.html -->
<p>
  test1 works!
</p>
<label> test1 value</label>
<input  type="text" [(ngModel)]="test1_value1" >
<input  type="text" [(ngModel)]="test1_value2" >
<!-- 將test1_value1的值給test2_value1... -->
<app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2"></app-test2>

結果：

說明：

剛重新整理頁面時，將test2_value1、test2_value2的值從 undefined 變成 1、2。
頁面更改test1_value1，將test2_value1的值從 1 變成 11。
以此類推，可以使用 ngOnChanges對值發生變化時進行處理。
ngInit 的執行順序在 ngOnChanges之後，可以做一下初始化的工作

　　ngDoCheck()

test2.component.ts

import { Component, OnInit,Input,OnChanges,DoCheck} from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
//需要實現 DoCheck 介面
export class Test2Component implements OnInit OnChanges DoCheck{
	@Input() test2_value1: string;
	@Input() test2_value2: string;
	constructor() { }

	ngOnInit() {
		//console.log("這裡執行ngOnInit");
	}
	ngOnChanges(changes:SimpleChanges){
		//console.log(changes);
		for (let propName in changes) {
			let chng = changes[propName];
			let cur  = JSON.stringify(chng.currentValue);
			let prev = JSON.stringify(chng.previousValue);
			//console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
		}
	}
	ngDoCheck(){
    console.log("執行ngDoCheck");
  }
}

結果：

說明：

重新整理頁面的時候，執行了兩次。
每次滑鼠放到，input框上就會執行一次
更改input值，也會執行一次，開銷非常大。慎用！

　　ngAfterContentInit()

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  //在app主組價中，將test2元件放到test1元件中，
  template: `<app-test1>
    <app-test2></app-test2>
    </app-test1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

test1.component.ts

import { Component, OnInit,OnChanges} from '@angular/core';

@Component({
  selector: 'app-test1',
  //templateUrl: './test1.component.html',
  //ng-content指定的是外來的元件 在元件app中定義的 test2元件
  //同樣在test1元件中，也增加test2 元件 
  template: `<div> <ng-content></ng-content> <app-test2></app-test2> </div>`,
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
    test1_value1:string;
    test1_value2:string;
  constructor() { }

  ngOnInit() {
        this.test1_value1="1"
        this.test1_value2="2"
  }
    ngOnChanges(){
        console.log("onchange");
    }
}

test2.component.ts

import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit} from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit{
    @Input() test2_value1: string;
    @Input() test2_value2: string;
    constructor() { }

    ngOnInit() {
        //console.log("這裡執行ngOnInit");
    }
    ngOnChanges(changes:SimpleChanges){
        //console.log(changes);
        for (let propName in changes) {
            let chng = changes[propName];
            let cur  = JSON.stringify(chng.currentValue);
            let prev = JSON.stringify(chng.previousValue);
            //console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
        }
    }
    ngDoCheck(){
    console.log("執行ngDoCheck");
  }
    ngAfterContentInit(){
        console.log("執行ngAfterContentInit");
    }
}

結果：

說明：

ngAfterContentInit會在外來內容被投影到元件中之後呼叫，也就是說當test2元件以html的形式投影到test1元件之後執行，
因為使用兩種方式進行投影了兩次，所以ngAfterContentInit執行了兩次
其他操作只會增加ngDoCheck的次數，並沒有增加ngAfterContentInit的次數

　　ngAfterContentCheck()

test2.component.ts

import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck} from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck{
    @Input() test2_value1: string;
    @Input() test2_value2: string;
    constructor() { }

    ngOnInit() {
        //console.log("這裡執行ngOnInit");
    }
    ngOnChanges(changes:SimpleChanges){
        //console.log(changes);
        for (let propName in changes) {
            let chng = changes[propName];
            let cur  = JSON.stringify(chng.currentValue);
            let prev = JSON.stringify(chng.previousValue);
            //console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
        }
    }
    ngDoCheck(){
    console.log("執行ngDoCheck");
  }
    ngAfterContentInit(){
        console.log("執行ngAfterContentInit");
    }
    ngAfterContentChecked(){
        console.log("執行ngAfterContentChecked");
    }
}

結果：

說明：

在執行ngDoCheck之後一定會執行一次ngAfterContentInit
每次完成被投影元件內容的變更檢測之後呼叫
其他程式碼沒貼出來，就是跟上一個是一樣的

　　ngAfterViewInit()

test1.component.ts

import { Component, OnInit,OnChanges,ViewChild} from '@angular/core';
import {Test2Component} from "../test2/test2.component"

@Component({
  selector: 'app-test1',
  //templateUrl: './test1.component.html',
  template: `<div>  <input  type="text" [(ngModel)]="test1_value1" >
<input  type="text" [(ngModel)]="test1_value2" ><ng-content></ng-content>
<app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2"></app-test2> </div>`,
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
    test1_value1:string;
    test1_value2:string;
  constructor() { }
    @ViewChild(Test2Component);
  ngOnInit() {
        this.test1_value1="1"
        this.test1_value2="2"
  }
    ngOnChanges(){
        console.log("onchange");
    }
}

test2.component.ts

import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck ,AfterViewChecked, AfterViewInit{
    @Input() test2_value1: string;
    @Input() test2_value2: string;
    constructor() { }

    ngOnInit() {
        //console.log("這裡執行ngOnInit");
    }
    ngOnChanges(changes:SimpleChanges){
        //console.log(changes);
        for (let propName in changes) {
            let chng = changes[propName];
            let cur  = JSON.stringify(chng.currentValue);
            let prev = JSON.stringify(chng.previousValue);
            //console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
        }
    }
    ngDoCheck(){
    console.log("執行ngDoCheck");
  }
    ngAfterContentInit(){
        console.log("執行ngAfterContentInit");
    }
    ngAfterContentChecked(){
        console.log("執行ngAfterContentChecked");
    }
    ngAfterViewInit(){
        console.log("執行ngAfterViewInit");
    }
}

結果：

說明：

在每次建立了元件的子檢視後呼叫，每次在test1元件中建立test2元件時都會呼叫，
在test1元件中，需要使用@ChildView 裝飾器，將test2component裝飾一下

　　ngAfterViewChecked

test2.component.ts

import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck ,AfterViewChecked, AfterViewInit{
    @Input() test2_value1: string;
    @Input() test2_value2: string;
    constructor() { }

    ngOnInit() {
        //console.log("這裡執行ngOnInit");
    }
    ngOnChanges(changes:SimpleChanges){
        //console.log(changes);
        for (let propName in changes) {
            let chng = changes[propName];
            let cur  = JSON.stringify(chng.currentValue);
            let prev = JSON.stringify(chng.previousValue);
            //console.log(`${propName}: 新值 = ${cur}, 舊值 = ${prev}`);
        }
    }
    ngDoCheck(){
    console.log("執行ngDoCheck");
  }
    ngAfterContentInit(){
        console.log("執行ngAfterContentInit");
    }
    ngAfterContentChecked(){
        console.log("執行ngAfterContentChecked");
    }
    ngAfterViewInit(){
        console.log("執行ngAfterViewInit");
    }
    ngAfterViewChecked(){
        console.log("執行ngAfterViewChecked");
    }
}

結果：

說明：

上圖紅色框是，頁面重新整理完後執行的ngAfterViewChecked，前兩次是伴隨init一起的，後面兩個是，test1給test2賦值導致的
上圖綠色框是，更改test1中的一個值，導致了更改了test2的值執行的ngAfterViewChecked
我再test1元件的兩個input上，滑鼠焦點來回切換時，同樣也會執行ngAfterViewChecked，還是慎用這個鉤子函式吧

　　OnDestroy

test1.component.ts

import { Component, OnInit,OnChanges,ViewChild} from '@angular/core';
import {Test2Component} from "../test2/test2.component"

@Component({
  selector: 'app-test1',
  //templateUrl: './test1.component.html',
  template: `
        <div>  
            <input  type="text" [(ngModel)]="test1_value1" >
            <input  type="text" [(ngModel)]="test1_value2" >
            <ng-content></ng-content>
            <app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2">
            </app-test2> 
              <div *ngFor="let test of tests" appTest4 class="tests">
            {{test}}
        </div>
            <input type="button"value="add" (click)="addDiv()">
            <input type="button"value="delete"(click)="deleteDiv()">
        </div>`,
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
    test1_value1:string;
    test1_value2:string;
    tests:any;
  constructor() { }
    @ViewChild(Test2Component) viewChild:Test2Component;
  ngOnInit() {
        this.test1_value1="1"
        this.test1_value2="2"
        this.tests=[1,2,3]
  }
    ngOnChanges(){
        console.log("onchange");
    }
    addDiv(){
        this.tests.push("1212");
    }
    deleteDiv(){
        this.tests=[];
    }
}

test4.directive.ts

import { Directive, OnInit, OnDestroy  } from '@angular/core';

@Directive({
  selector: '[appTest4]'
})
export class Test4Directive implements OnInit, OnDestroy{

  constructor() { }
  ngOnInit()    { console.log("test4 directive ngOnInit")}

  ngOnDestroy() { console.log("test4 directive ngDestroy");}
}

結果：

說明：

建立一個directive來監測test1 元件中的 div的生成與銷燬
開始有預設的三個值，所有ngOnInit執行了三次
新增一個值，又執行一次ngOnInit
刪除所有的值，執行了4次ngDestroy

總結：

　　由於生命週期的存在，angular提供了眾多的生命週期的鉤子，讓我們能夠很好的在發生變化的時候進行處理。

Angular 個人深究（四）【生命週期鉤子】

Angular 個人深究（四）【生命週期鉤子】定義：每個元件都有一個被 Angular 管理的生命週期。 Angular 建立它，渲染它，建立並渲染它的子元件，在它被繫結的屬性發生變化時檢查它，並在它從 DOM 中被移除前銷燬它。 Angular 提供了生命週期鉤子，把這些關鍵生命時刻暴露出來，賦

Angular 個人深究（五）【外部包引用 Leaflet 簡單實用】

　　Leaflet 使用　　　　最近在Angular專案中，用到了地圖，由於種種原因放棄了百度地圖api使用，最後選擇了leaflet，簡單介紹一下。　　　　介紹：　　　　Leaflet 是一個為移動裝置設計的互動式地圖的開源的 javascript庫，並只有38k，包含了大多數開發者

語音學習筆記（四）【傳統聲學模型】

語音學習筆記（四）【傳統聲學模型】 1.混合高斯模型（GMM）當使用混合高斯隨機變數的分佈用於匹配語音特徵時，就形成了混合高斯模型（GMM）。 1.1隨機變數 1）隨機變數可以理解為從隨機實驗到變數的一個對映； 2）隨機變數所有

maven系列-（四）maven生命週期和外掛

前面講了maven的依賴和倉庫，這是經常接觸到的一些操作。但是我們平時還會接觸到maven生命週期的一些操作，比如打包、編譯等，maven就可以把我們的專案進行打包、編譯。其實這個過程，還是涉及到很多知識點的，只不過我們在操作過程中察覺不到而已。我們在專案開發中都會涉及到清理、編譯、測

Servlet入門（四）Servlet生命週期

前言通過前面的講解，我們基本瞭解了Servlet的作用和流程，本章探討Servlet的生命週期方法 1.概念在學習本章之前，我們先來回顧一下Servlet的執行流程：瀏覽器傳送請求至伺服器伺服器根據根

[原創]分散式系統之快取的微觀應用經驗談（四）【互動場景篇】

分散式系統之快取的微觀應用經驗談（四）【互動場景篇】前言　　近幾個月一直在忙些瑣事，幾乎年後都沒怎麼閒過。忙忙碌碌中就進入了2018年的秋天了，不得不感嘆時間總是如白駒過隙，也不知道收穫了什麼和失去了什麼。最近稍微休息，買了兩本與技術無關的書，其一是 Yann Martel 寫的《The

SpringMVC4 學習筆記（四）【處理器介面卡HandlerAdapter】

常用的處理器介面卡實現類有兩種 HttpRequestHandlerAdapter 處理實現了HttpRequestHandler介面的處理器，當處理器實現介面後複寫handleRequest方法（無返回值）。 public class MyController impl

前端框架vue.js系列（10）：生命週期鉤子函式

每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。下圖說明了例項的生命週期。你不需要立

ArcGIS API for JavaScript3.x 學習筆記[5] 加載底圖（四）【高德在線地圖】

alex apt arcgis lex 添加 declare 學習 created ade /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geom

C#設計模式之四抽象工廠模式（AbstractFactory）【創建型】

抽象抽象工廠 album 代碼 ctf bst actor 抽象工廠模式 .cn 一、引言寫了3篇有關設計模式的文章了，大家有了些反饋，說能從中學到一些東西，我感到很欣慰，那就繼續努力。今天我要寫第四個模式了，該模式叫抽象工廠。上一篇文章我們講了【工廠方法】模式，它是為

Angular開發實踐（四）：組件之間的交互

lec previous call 私有判斷處理方法數組依然處理在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。根據數據的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過

[原創]分布式系統之緩存的微觀應用經驗談（四）【交互場景篇】

預熱計算機硬件只需要多次閱讀分布式事務模糊 mil reat 分布式系統之緩存的微觀應用經驗談（四）【交互場景篇】前言　　近幾個月一直在忙些瑣事，幾乎年後都沒怎麽閑過。忙忙碌碌中就進入了2018年的秋天了，不得不感嘆時間總是如白駒過隙，也不

前端開發框架總結之Angular實用技巧（四）

前端開發框架總結之Angular實用技巧（四）上文講了Angular中路由的相關的知識，掌握了這些，我們就可以構建比較複雜的頁面

java基礎-中級（四）【IO流與檔案】

4、IO流與檔案 IO流：在Java API中，可以從其中讀取一個位元組序列的物件稱作輸入流，向其中寫入一個位元組序列的物件叫做輸出流。抽象類InputStream和OutputStream構成了輸入/輸出（I/O）的位元組基礎類，Reader和Writer抽象類構成字元的輸入輸出流。

Java基礎-初級（四）【陣列、常用類的使用】

目錄 4、陣列、常用類的使用 4.1 陣列 4.1.1 陣列建立的幾種方式 4.1.2 foreach 迴圈 4.1.3 多維陣列 4.1.4 Arrays類 4.1.5 陣列排序 4.1.5 Object類 4.1.6 String類

spring cloud 入門（四）【Eureka註冊中心，微服務之間服務呼叫方式二（FeignClient進行服務呼叫）】

FeignClient 支隊服務消費方進行修改，服務提供方不需要修改還是對 User 進行修改 UserApplication 中新增 @EnableFeignClients UserApplication 程式碼如下： pac

軟工視訊（四）【面向過程

說起面向過程，想起了面向物件。那麼就來看一下兩者究竟有什麼區別。首先來說一下兩者的含義：面向過程：就是分析出解決問題所需要的步驟，然後把函式這些步驟一步一步實現，使用的時候一個一個一次呼叫就可以了。面向物件：是把構成問題事務分解成各個物件，建立物件的目的不是

JAVA基礎24-多執行緒（四）【讀寫鎖，阻塞佇列，執行緒池】

一、讀寫鎖使用步驟二、阻塞佇列 (BlockingQueue) 提供執行緒安全的佇列訪問方式；當阻塞佇列進行插入資料時，若佇列滿，則執行緒阻塞，直到佇列非滿的時候當阻塞佇列取資料時，若佇列為空，則執行緒阻塞直到佇列非空時候。

opentcs 夜光開發手冊（四）【針對最新4.12版本】

夜光序言：我是人間惆悵客, 知君何事淚縱橫, 斷腸聲裡憶平生。正文：新特性: 為車輛引入一個顯式整合級別屬性，該屬性表示車輛應該整合到系統中的程度。(將整合級別設定為TO_BE_UTILIZED，取代了以前用於整合車輛的手動

學習理論、模型選擇、特徵選擇——斯坦福CS229機器學習個人總結（四）

這一份總結裡的主要內容不是演算法，是關於如何對偏差和方差進行權衡、如何選擇模型、如何選擇特徵的內容，通過這些可以在實際中對問題進行更好地選擇與修改模型。 1、學習理論（Learning theory） 1.1、偏差/方差（Bias/variance）

Angular 個人深究（四）【生命週期鉤子】

Angular 個人深究（四）【生命週期鉤子】

定義：

概覽：

範例：

ngOnChanges()、ngInit

test2.component.ts

test1.component.html

結果：

說明：

ngDoCheck()

test2.component.ts

結果：

說明：

ngAfterContentInit()

app.component.ts

test1.component.ts

test2.component.ts

結果：

說明：

ngAfterContentCheck()

test2.component.ts

結果：

說明：

ngAfterViewInit()

test1.component.ts

test2.component.ts

結果：

說明：

ngAfterViewChecked

test2.component.ts

結果：

說明：

OnDestroy

test1.component.ts

test4.directive.ts

結果：

說明：

總結：

相關推薦

　　ngOnChanges()、ngInit

　test1.component.html

　　ngDoCheck()

　　ngAfterContentInit()

　　ngAfterContentCheck()

　　ngAfterViewInit()

　　ngAfterViewChecked

　　OnDestroy