Back to Details

angular-lifecycle

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Lifecycle Hooks

Angular 生命周期钩子

Version: Angular 21 (2025) Tags: Lifecycle, Hooks, ngOnInit, ngOnChanges
References: Lifecycle Hooks • API
版本： Angular 21 (2025) 标签： Lifecycle, Hooks, ngOnInit, ngOnChanges
参考资料： Lifecycle Hooks • API

Best Practices

最佳实践

  • Use OnInit for initialization
ts
import { OnInit } from '@angular/core';

@Component({})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Initialize data, call services
    this.loadData();
  }
}
  • Use OnDestroy for cleanup
ts
import { OnDestroy } from '@angular/core';

@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}
  • Use OnChanges for input changes
ts
import { OnChanges, SimpleChanges } from '@angular/core';

@Component({})
export class MyComponent implements OnChanges {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      console.log('Data changed:', this.data);
    }
  }
}
  • Use AfterViewInit for DOM manipulation
ts
import { AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({})
export class MyComponent implements AfterViewInit {
  @ViewChild('el') el!: ElementRef;
  
  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}
  • Use AfterContentInit for projected content
ts
import { AfterContentInit, ContentChild } from '@angular/core';

@Component({})
export class MyComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;
  
  ngAfterContentInit() {
    // Access projected content
  }
}
  • Use DoCheck for custom change detection
ts
import { DoCheck } from '@angular/core';

@Component({})
export class MyComponent implements DoCheck {
  ngDoCheck() {
    // Custom change detection
  }
}
  • Use OnPush with lifecycle
ts
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    // OnPush needs explicit change detection trigger
  }
}
  • Use constructor vs ngOnInit
ts
// Constructor - for dependency injection only
constructor(private service: MyService) {}

// ngOnInit - for initialization logic
ngOnInit() {
  this.data = this.service.getData();
}
  • 使用OnInit完成初始化操作
ts
import { OnInit } from '@angular/core';

@Component({})
export class MyComponent implements OnInit {
  ngOnInit() {
    // 初始化数据，调用服务
    this.loadData();
  }
}
  • 使用OnDestroy完成清理工作
ts
import { OnDestroy } from '@angular/core';

@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}
  • 使用OnChanges处理输入属性变更
ts
import { OnChanges, SimpleChanges } from '@angular/core';

@Component({})
export class MyComponent implements OnChanges {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      console.log('数据已变更：', this.data);
    }
  }
}
  • 使用AfterViewInit进行DOM操作
ts
import { AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({})
export class MyComponent implements AfterViewInit {
  @ViewChild('el') el!: ElementRef;
  
  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}
  • 使用AfterContentInit处理投影内容
ts
import { AfterContentInit, ContentChild } from '@angular/core';

@Component({})
export class MyComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;
  
  ngAfterContentInit() {
    // 访问投影内容
  }
}
  • 使用DoCheck实现自定义变更检测
ts
import { DoCheck } from '@angular/core';

@Component({})
export class MyComponent implements DoCheck {
  ngDoCheck() {
    // 自定义变更检测逻辑
  }
}
  • 配合生命周期使用OnPush变更检测策略
ts
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    // OnPush需要显式触发变更检测
  }
}
  • 构造函数与ngOnInit的使用区别
ts
// 构造函数 - 仅用于依赖注入
constructor(private service: MyService) {}

// ngOnInit - 用于编写初始化逻辑
ngOnInit() {
  this.data = this.service.getData();
}