Lifecycle Hooks（Lifecycle Hooks）

优质

小牛编辑

129浏览

2023-12-01

Angular 2应用程序遍历整个流程集，或者从应用程序的启动到结束都有一个生命周期。

下图显示了Angular 2应用程序生命周期中的整个过程。

以下是每个生命周期钩子的描述。

ngOnChanges - 当数据绑定属性的值更改时，将调用此方法。
ngOnInit - 只要在Angular首次显示数据绑定属性后初始化指令/组件，就会调用此方法。
ngDoCheck - 用于检测并对Angular自身无法检测或不会检测到的更改进行操作。
ngAfterContentInit - 在Angular将外部内容ngAfterContentInit到组件视图中之后调用此方法。
ngAfterContentChecked - 在Angular检查投影到组件中的内容后调用此方法。
ngAfterViewInit - 在Angular初始化组件的视图和子视图后，将在响应中调用此方法。
ngAfterViewChecked - 在Angular检查组件的视图和子视图后，将在响应中调用此方法。
ngOnDestroy - 这是在Angular破坏指令/组件之前的清理阶段。

以下是实现一个生命周期钩子的示例。在app.component.ts文件中，放置以下代码。

import { 
   Component 
} from '@angular/core';  
@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 
export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

在上面的程序中，我们调用ngOnInit生命周期钩子，特别提到this.values参数的值应该设置为“Hello”。

保存所有代码更改并刷新浏览器后，您将获得以下输出。