本文介紹了淺談angular2 組件的生命周期鉤子，分享給大家，具體如下：

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、湘鄉(xiāng)網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為湘鄉(xiāng)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

按照生命周期執(zhí)行的先后順序，Angular生命周期接口如下所示

名稱	時機	接口	范圍
ngOnChanges	當(dāng)被綁定的輸入屬性的值發(fā)生變化時調(diào)用，首次調(diào)用一定會發(fā)生在 ngOnInit之前。	OnChanges	指令和組件
ngOnInit	在第一輪 ngOnChanges 完成之后調(diào)用。 ( 譯注：也就是說當(dāng)每個輸入屬性的值都被觸發(fā)了一次 ngOnChanges之后才會調(diào)用 ngOnInit ，此時所有輸入屬性都已經(jīng)有了正確的初始綁定值 )	OnInit	指令和組件
ngDoCheck	在每個 Angular 變更檢測周期中調(diào)用。	DoCheck	指令和組件
ngAfterContentInit	當(dāng)把內(nèi)容投影進(jìn)組件之后調(diào)用。	AfterContentInit	組件
ngAfterContentChecked	每次完成被投影組件內(nèi)容的變更檢測之后調(diào)用。	AfterContentChecked	組件
ngAfterViewInit	初始化完組件視圖及其子視圖之后調(diào)用。 after initializing the component's views and child views.	AfterViewInit	組件
ngAfterViewChecked	每次做完組件視圖和子視圖的變更檢測之后調(diào)用。	AfterViewChecked	組件
ngOnDestroy	當(dāng) Angular 每次銷毀指令 /組件之前調(diào)用。	OnDestroy	指令和組件

生命周期順序簡寫

在Angular通過構(gòu)造函數(shù)創(chuàng)建組件/指令時，它調(diào)用這些生命周期鉤子方法的順序是：

• ngOnChanges：在ngOnInit之前，當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時。
• ngOnInit：在第一次ngOnChanges之后。
• ngDoCheck：每次Angular變化檢測時。
• ngAfterContentInit：在外部內(nèi)容放到組件內(nèi)之后。
• ngAfterContentChecked：在放到組件內(nèi)的外部內(nèi)容每次檢查之后。
• ngAfterViewInit：在初始化組件視圖和子視圖之后。
• ngAfterViewChecked：在妹子組件視圖和子視圖檢查之后。
• ngOnDestroy：在Angular銷毀組件/指令之前。

除此之外，一些組件還提供了自己的生命周期鉤子。例如router有routerOnActivate。

測試生命周期順序的代碼

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: '<ng-content></ng-content>'
})
class Panel {
 // 組件輸入屬性值發(fā)生改變（首次調(diào)用一定會發(fā)生在 ngOnInit之前。）
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 組件初始化完成（在第一輪 ngOnChanges 完成之后調(diào)用。 ( 譯注：也就是說當(dāng)每個輸入屬性的值都被觸發(fā)了一次 ngOnChanges 之后才會調(diào)用 ngOnInit ，此時所有輸入屬性都已經(jīng)有了正確的初始綁定值 )）
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck鉤子不要同時出現(xiàn)，互斥！。本例僅供學(xué)習(xí)');
 }
 // 臟值檢測器被調(diào)用后調(diào)用
 ngDoCheck() {
  console.log('Do check');
 }
 // 組件銷毀之前
 ngOnDestroy() {
  console.log('Destroy');
 }
 // 組件-內(nèi)容-初始化完成 PS：指的是ContentChild或者Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 // 組件內(nèi)容臟檢查完成
 ngAfterContentChecked() {
  console.log('After content checked');
 }
 // 組件視圖初始化完成 PS：指的是ViewChild或者ViewChildren
 ngAfterViewInit() {
  console.log('After view init');
 }
 // 組件視圖臟檢查完成之后
 ngAfterViewChecked() {
  console.log('After view checked');
 }
}

@Component({
 selector: 'app',
 template: `
  <button (click)="toggle()">Toggle</button>
  <div *ngIf="counter % 2 == 0">
   <panel caption="Sample caption" title="Sample">Hello world!</panel>
  </div>
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：淺談angular2組件的生命周期鉤子-創(chuàng)新互聯(lián)
分享路徑：http://www.chinadenli.net/article48/docdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制開發(fā)、做網(wǎng)站、網(wǎng)站收錄、網(wǎng)站策劃、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)