角生命周期钩-DEV365 开发者社区

角生命周期钩是在组件或指令的生命周期的不同阶段称为的方法。这些钩子允许您在生命周期中的特定点执行操作，例如初始化或破坏组件时。

这是角度的一些常用生命周期钩：

ngonchanges：每当组件的一个或多个输入属性更改时，都称呼此钩。您可以使用它来应对更改并相应地更新组件状态。这是一个例子：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnChanges {
  @Input() name: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

在此示例中，UserComponent具有@Input属性，称为名称。 ngonchanges挂钩在名称属性更改时将更改到控制台的更改。

ngoninit：在第一个ngonchanges调用后初始化组件时，将调用此钩。您可以使用它来执行组件的任何初始化逻辑。这是一个例子：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnInit {
  name: string;

  ngOnInit() {
    this.name = 'John';
  }
}

在此示例中，UserComponent在Ngoninit Hook中将名称属性设置为“ John”。

ngdocheck：每当Angular检测到其他生命周期钩可能未检测到的变化时，此钩被称为。您可以使用它为组件执行自定义更改检测逻辑。这是一个例子：

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements DoCheck {
  name: string;

  ngDoCheck() {
    // Perform custom change detection logic
  }
}

在此示例中，UserComponent实现了NGDOCHECK挂钩以执行自定义更改检测逻辑。

ngondestroy：在销毁组件之前，此钩被称为。您可以使用它来执行组件的任何清理逻辑，例如从可观察到的或发布资源中取消订阅。这是一个例子：

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user',
  template: '<p>Hello {{name}}!</p>'
})
export class UserComponent implements OnDestroy {
  name: string;
  subscription: Subscription;

  constructor() {
    this.subscription = someObservable.subscribe();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

在此示例中，UserComponent从Ngondestroy钩中可观察到的可观察到的订阅以避免内存泄漏。

这些只是如何使用角生命周钩在组件生命周期的不同阶段执行自定义逻辑的一些示例。

感谢您阅读ð