Angular - 生命周期钩子

Angular 应用程序经历了一整套流程，或者从启动到应用程序结束都有一个生命周期。

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

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

• ngOnChanges - 当数据绑定属性的值发生变化时，就会调用此方法。

• ngOnInit - 这是在 Angular 首次显示数据绑定属性后，指令/组件初始化时调用的。

• ngDoCheck - 用于检测和处理 Angular 无法或不会自行检测的更改。

• ngAfterContentInit - 在 Angular 将外部内容投影到组件视图之后调用。

• 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”。

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