Angular生命周期钩子详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34645412/article/details/77996734

本文通过一个具体的Angular组件示例，详细介绍了Angular中各种生命周期钩子的执行顺序及其应用场景。从构造函数到销毁过程，每个关键阶段都有详细的注释记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：然后看钩子的执行顺序：

import {
  AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, Input, OnChanges,
  OnDestroy,
  OnInit, SimpleChanges
} from '@angular/core';
let logIndex:number=1;
@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})
export class LifeComponent implements OnInit ,OnChanges,DoCheck,AfterContentInit,AfterContentChecked,AfterViewChecked,AfterViewInit,OnDestroy{
 @Input()
 name:string;
  logIt(msg:string){
  console.log(`#${logIndex++} ${msg}`);
 }
  constructor() {
    this.logIt("name属性在构造函数里面的值是"+name);
  }
  ngAfterContentInit(): void {
    this.logIt("ngAfterContentInit");
  }

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

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

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

  ngOnDestroy(): void {
    this.logIt("ngOnDestroy");
  }
  ngDoCheck(): void {
    this.logIt("ngDoCheck");
  }

  ngOnChanges(changes: SimpleChanges): void {
    let name=changes['name'].currentValue;
    this.logIt("name在ngOnChanges的值是"+name);
  }



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

}