测试案例如下
import { ButtonDefaultRef, MyButtonDefaultMy } from './button.ref';
import {
Component, OnInit, HostListener, Injectable,
DoCheck, OnChanges, SimpleChanges, Input,
OnDestroy, AfterContentInit, AfterContentChecked,
AfterViewInit, AfterViewChecked
} from '@angular/core';
import { ButtonModel } from './button.model';
import { Platform } from '@angular/cdk/platform';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, map, tap, pluck } from 'rxjs/operators';
export interface Action {
type: string;
payload?: any;
}
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css'],
providers: [ButtonDefaultRef]
})
export class ButtonComponent extends BehaviorSubject
implements OnInit, DoCheck, OnChanges, OnDestroy,
AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
@Input() state: any = {};
@HostListener('click', ['$event'])
_click(e: any) {
this.btn._click(e);
}
constructor(
public btn: ButtonDefaultRef,
public platform: Iwe7Platform,
) {
super({
type: 'constructor',
payload: {}
});
this.subscribe(res => {
console.log(res);
});
}
getCyc(name: string): Observable {
return this.pipe(filter(res => {
return res.type === name;
}), pluck('payload'));
}
setCyc(name: string, payload: any) {
this.next({
type: name,
payload: payload
});
}
ngOnChanges(changes: SimpleChanges) {
this.setCyc('ngOnChanges', this.state);
}
ngOnInit() {
this.setCyc('ngOnInit', this.state);
}
ngDoCheck() {
this.setCyc('ngDoCheck', this.state);
}
ngAfterContentInit() {
this.setCyc('ngAfterContentInit', this.state);
}
ngAfterContentChecked() {
this.setCyc('ngAfterContentChecked', this.state);
}
ngAfterViewInit() {
this.setCyc('ngAfterViewInit', this.state);
}
ngAfterViewChecked() {
this.setCyc('ngAfterViewChecked', this.state);
}
ngOnDestroy() {
this.complete();
this.unsubscribe();
}
}
运行结果
constructor->ngOnChanges->ngOnInit->ngDoCheck
->ngAfterContentInit->ngAfterContentChecked
->ngAfterViewInit->ngAfterViewChecked->ngOnDestroy
点击触发_click结果
ngDoCheck->ngAfterContentChecked->ngAfterViewChecked
增加另一个组件
export class Button2Component implements OnInit {
i = 0;
ngOnInit() {
setTimeout(() => {
this.i++;
}, 2000);
}
}
运行结果
ngDoCheck->ngAfterContentChecked->ngAfterViewChecked
小总结
初始化组件生命周期执行顺序
constructor->ngOnChanges->ngOnInit->ngDoCheck
->ngAfterContentInit->ngAfterContentChecked
->ngAfterViewInit->ngAfterViewChecked->ngOnDestroy
dom事件setTimeout,setInterval,ajax均会触发所有组件
ngDoCheck->ngAfterContentChecked->ngAfterViewChecked
修改ButtonDefaultRef如下
@Injectable({
providedIn: 'root'
})
export class ButtonDefaultRef extends ButtonModel implements
OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy, AfterViewChecked {
state: any = {};
_click(e) {
console.log(e);
}
constructor(
) {
super({
type: 'constructor',
payload: {}
});
this.subscribe(res => {
console.log(res);
});
}
getCyc(name: string): Observable {
return this.pipe(filter(res => {
return res.type === name;
}), pluck('payload'));
}
setCyc(name: string, payload: any) {
this.next({
type: name,
payload: payload
});
}
ngOnChanges(changes: SimpleChanges) {
this.setCyc('ngOnChanges', this.state);
}
ngOnInit() {
this.setCyc('ngOnInit', this.state);
}
ngDoCheck() {
this.setCyc('ngDoCheck', this.state);
}
ngAfterContentInit() {
this.setCyc('ngAfterContentInit', this.state);
}
ngAfterContentChecked() {
this.setCyc('ngAfterContentChecked', this.state);
}
ngAfterViewInit() {
this.setCyc('ngAfterViewInit', this.state);
}
ngAfterViewChecked() {
this.setCyc('ngAfterViewChecked', this.state);
}
ngOnDestroy() {
this.setCyc('ngOnDestroy', this.state);
this.complete();
this.unsubscribe();
}
}
点击btn2注销btn1，触发结果如下
btnRef->ngOnDestroy
btn1->ngOnDestroy
小总结
在Injectable中，只有constructor和ngOnDestroy生效，注销组件时，先执行Injectable中的ngOnDestroy，而后执行组件中的ngOnDestroy
给第一个组件添加一个directive
@Directive({
selector: '[appTest]'
})
export class TestDirective extends BehaviorSubject
implements OnInit, DoCheck, OnChanges, OnDestroy,
AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
state: any = {};
constructor() {
super({
type: 'constructor',
payload: {}
});
this.subscribe(res => {
console.log(res);
});
}
getCyc(name: string): Observable {
return this.pipe(filter(res => {
return res.type === name;
}), pluck('payload'));
}
setCyc(name: string, payload: any) {
this.next({
type: name,
payload: payload
});
}
ngOnChanges(changes: SimpleChanges) {
this.setCyc('ngOnChanges', this.state);
}
ngOnInit() {
this.setCyc('ngOnInit', this.state);
}
ngDoCheck() {
this.setCyc('ngDoCheck', this.state);
}
ngAfterContentInit() {
this.setCyc('ngAfterContentInit', this.state);
}
ngAfterContentChecked() {
this.setCyc('ngAfterContentChecked', this.state);
}
ngAfterViewInit() {
this.setCyc('ngAfterViewInit', this.state);
}
ngAfterViewChecked() {
this.setCyc('ngAfterViewChecked', this.state);
}
ngOnDestroy() {
this.setCyc('ngOnDestroy', this.state);
this.complete();
this.unsubscribe();
setTimeout(() => {
console.log(this);
}, 500);
}
}
运行结果
btn: ngOnChanges->ngOnInit->ngDoCheck
appTest: ngOnChanges->ngOnInit->ngDoCheck;
btn: ngAfterContentInit->ngAfterContentChecked
appTest: ngAfterContentInit->ngAfterContentChecked
btn: ngAfterViewInit->ngAfterViewChecked
appTest: ngAfterViewInit->ngAfterViewChecked
检查顺序
btn: ngDoCheck
appTest: ngDoCheck
btn: ngAfterContentChecked
appTest: ngAfterContentChecked
btn: ngAfterViewChecked
appTest: ngAfterViewChecked
小总结
当一个组件上有directive时，生命周期顺序为
宿主: ngOnChanges->ngOnInit->ngDoCheck
directive: ngOnChanges->ngOnInit->ngDoCheck;
宿主: ngAfterContentInit->ngAfterContentChecked
directive: ngAfterContentInit->ngAfterContentChecked
宿主: ngAfterViewInit->ngAfterViewChecked
directive: ngAfterViewInit->ngAfterViewChecked
检测顺序为
宿主: ngDoCheck
directive: ngDoCheck
宿主: ngAfterContentChecked
directive: ngAfterContentChecked
宿主: ngAfterViewChecked
directive: ngAfterViewChecked
结论
当宿主ngAfterViewInit时directive其实还没准备好
修改代码，将appTest放在btn内部，也就是btn是appTest的父级！运行结果如下：
btn: ngOnChanges->ngOnInit->ngDoCheck
appTest: ngOnChanges->ngOnInit->ngDoCheck->ngAfterContentInit->ngAfterContentChecked
btn: ngAfterContentInit->ngAfterContentChecked
appTest: ngAfterViewInit->ngAfterViewChecked
btn: ngAfterViewInit->ngAfterViewChecked
变化检测时
btn: ngDoCheck
appTest: ngDoCheck->ngAfterContentChecked
btn: ngAfterContentChecked
appTest: ngAfterViewChecked
btn: ngAfterViewChecked
小总结
当父组件包含另一个子组件时,执行顺序如下
父: ngOnChanges->ngOnInit->ngDoCheck
子: ngOnChanges->ngOnInit->ngDoCheck->ngAfterContentInit->ngAfterContentChecked
父: ngAfterContentInit->ngAfterContentChecked
子: ngAfterViewInit->ngAfterViewChecked
父: ngAfterViewInit->ngAfterViewChecked
变化检测时
父: ngDoCheck
子: ngDoCheck->ngAfterContentChecked
父: ngAfterContentChecked
子: ngAfterViewChecked
父: ngAfterViewChecked
总结：父组件执行ngDoCheck后，等待子组件ngAfterContentChecked，然后到ngAfterContentChecked时，等待子组件ngAfterViewChecked，然后执行到ngAfterViewChecked
变化检测时：父组件执行到ngDoCheckde等待子组件ngAfterContentChecked，然后ngAfterContentChecked，等待子组件ngAfterViewChecked，最后ngAfterViewChecked；
此时当父组件准备完毕时，所有子组件均准备完毕，当父组件检查完毕时，所有子组件均已检查完毕！
注销时
先注销宿主上注入的service然后，最后注销directive
先注销子组件然后父组件
如果不想执行变化检测，可以使用NgZone.runOutsideAngular，当数据都准备好后，执行NgZone.run,然后会执行变化检测！
扩展应用
可以发现NgOnDestroy在component,directive,service均可自动执行!我们就可以利用这个特性做很多注销性的工作！