淺談angular2組件的生命周期鉤子

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

在宜昌等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站設(shè)計制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),宜昌網(wǎng)站建設(shè)費用合理。

按照生命周期執(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。

淺談angular2 組件的生命周期鉤子

測試生命周期順序的代碼

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

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: ''
})
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: `
  
  
   Hello world!
  
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

輸出結(jié)果

淺談angular2 組件的生命周期鉤子

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：淺談angular2組件的生命周期鉤子
分享URL：http://weahome.cn/article/ppgcgs.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

淺談angular2組件的生命周期鉤子

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管