重新认识angular生命周期

测试案例如下

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<any>
  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<any> {
    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<any> 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<any> {
        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<any>
  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<any> {
    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均可自动执行!我们就可以利用这个特性做很多注销性的工作！