Angular25 组件的生命周期钩子

 

1 生命周期钩子概述

　　组件共有9个生命周期钩子

　　

　　1.1 生命周期的执行顺序

　　　　技巧01：测试时父组件传递对子组件的输入属性进行初始化操作

import { Component, Input, SimpleChanges, OnInit, OnChanges, DoCheck, AfterContentChecked, AfterViewInit, AfterContentInit, AfterViewChecked, OnDestroy } from '@angular/core';

let logIndex : number = 1;

@Component({
  selector: 'life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.scss']
})
export class LifeComponent implements OnInit, OnChanges, DoCheck, 
AfterContentInit, AfterContentChecked, AfterViewInit, 
AfterViewChecked, OnDestroy {

  @Input()
  name : string;

  logIt(msg : String) {
    console.log(`#${logIndex++} - ${msg}`);
  }

  constructor() {
    this.logIt("name属性在constructor里面的值为： " + this.name);
  }

  ngOnInit() {
    this.logIt("ngOnInit");
  }

  ngOnChanges(changes : SimpleChanges){
    this.logIt("name属性在ngOnChanges里面的值为： " + this.name);
  }

  ngDoCheck() {
    this.logIt("ngDoCheck");
  }

  ngAfterContentInit() {
    this.logIt("ngAfterContentInit");  
  }

  ngAfterContentChecked() {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    this.logIt("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    this.logIt("ngAfterViewChecked");
  }

  ngOnDestroy() {
    this.logIt("ngOnDestroy");
  }



}

TS