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

創新互聯建站專注于企業網絡營銷推廣、網站重做改版、湘鄉網站定制設計、自適應品牌網站建設、H5高端網站建設、成都做商城網站、集團公司官網建設、外貿營銷網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為湘鄉等各大城市提供網站開發制作服務。

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

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

生命周期順序簡寫

在Angular通過構造函數創建組件/指令時，它調用這些生命周期鉤子方法的順序是：

• ngOnChanges：在ngOnInit之前，當數據綁定輸入屬性的值發生變化時。
• ngOnInit：在第一次ngOnChanges之后。
• ngDoCheck：每次Angular變化檢測時。
• ngAfterContentInit：在外部內容放到組件內之后。
• ngAfterContentChecked：在放到組件內的外部內容每次檢查之后。
• 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 {
 // 組件輸入屬性值發生改變（首次調用一定會發生在 ngOnInit之前。）
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 組件初始化完成（在第一輪 ngOnChanges 完成之后調用。 ( 譯注：也就是說當每個輸入屬性的值都被觸發了一次 ngOnChanges 之后才會調用 ngOnInit ，此時所有輸入屬性都已經有了正確的初始綁定值 )）
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck鉤子不要同時出現，互斥！。本例僅供學習');
 }
 // 臟值檢測器被調用后調用
 ngDoCheck() {
  console.log('Do check');
 }
 // 組件銷毀之前
 ngOnDestroy() {
  console.log('Destroy');
 }
 // 組件-內容-初始化完成 PS：指的是ContentChild或者Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 // 組件內容臟檢查完成
 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);

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

網站題目：淺談angular2組件的生命周期鉤子-創新互聯
分享路徑：http://www.yijiale78.com/article48/docdhp.html

成都網站建設公司_創新互聯，為您提供建站公司、定制開發、做網站、網站收錄、網站策劃、網站導航

廣告

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