Angular 2 - 生命周期挂钩

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

下图显示了 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”。

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

你好