Angular2生命周期

测试代码：

import { Component,OnInit,OnDestroy,OnChanges,DoCheck,AfterViewChecked
,AfterViewInit,AfterContentInit,AfterContentChecked } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 Angular 应用</h1>'
})
export class AppComponent implements OnInit,OnDestroy,OnChanges,DoCheck,AfterViewChecked
,AfterViewInit,AfterContentInit,AfterContentChecked
{
    
    ngOnInit(){
        console.log("ngOnInit");
    }
    ngOnDestroy(){
        console.log("ngOnDestroy");
    }
    ngOnChanges(){
        console.log("ngOnChanges");
    }
    ngDoCheck(){
        console.log("ngDoCheck");
    }
    ngAfterViewChecked(){
        console.log("ngAfterViewChecked");
    }
    ngAfterViewInit(){
        console.log("ngAfterViewInit");
    }
    ngAfterContentInit(){
        console.log("ngAfterContentInit");
    }
    ngAfterContentChecked(){
        console.log("ngAfterContentChecked");
    }
}

初始加载的结果：

app.component.ts:12 ngOnInit
app.component.ts:21 ngDoCheck
app.component.ts:30 ngAfterContentInit
app.component.ts:33 ngAfterContentChecked
app.component.ts:27 ngAfterViewInit
app.component.ts:24 ngAfterViewChecked
:3000/node_modules/@angular/core/bundles/core.umd.js:210 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
:3000/app/app.component.js:23 ngDoCheck
:3000/app/app.component.js:35 ngAfterContentChecked
:3000/app/app.component.js:26 ngAfterViewChecked
:3000/node_modules/@angular/core/bundles/core.umd.js:210 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
:3000/app/app.component.js:23 ngDoCheck
:3000/app/app.component.js:35 ngAfterContentChecked
:3000/app/app.component.js:26 ngAfterViewChecked
:3000/node_modules/@angular/core/bundles/core.umd.js:210 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
:3000/app/app.component.js:23 ngDoCheck
:3000/app/app.component.js:35 ngAfterContentChecked
:3000/app/app.component.js:26 ngAfterViewChecked
:3000/app/app.component.js:23 ngDoCheck
:3000/app/app.component.js:35 ngAfterContentChecked
:3000/app/app.component.js:26 ngAfterViewChecked
:3000/app/app.component.js:23 ngDoCheck
:3000/app/app.component.js:35 ngAfterContentChecked
:3000/app/app.component.js:26 ngAfterViewChecked

输入框改变或焦点改变时生命周期

image.png

ngDoCheck
app.component.ts:36 ngAfterContentChecked
app.component.ts:27 ngAfterViewChecked

当两个component使用同一个outlet时，从一个组件跳到另一个组件时会调用ngOnDestroy方法

Angular2生命周期

推荐阅读更多精彩内容