要实现生命周期钩子，只需实现对应的接口即可，如实现 ngOnChanges 钩子只需实现 OnChanges 接口即可：

export class XxxComponents
  implements
    OnInit,
    OnChanges,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy {
  ngOnInit(): void {
    console.log("我是 ngOnInit");
  ngOnChanges(): void {
    console.log("我是 OnChange");
  ngDoCheck(): void {
    console.log("我是 ngDoCheck");
  ngAfterContentInit(): void {
    console.log("我是 ngAfterContentInit");
  ngAfterContentChecked(): void {
    console.log("我是 ngAfterContentChecked");
  ngAfterViewInit(): void {
    console.log("我是 ngAfterViewInit");
  ngAfterViewChecked(): void {
    console.log("我是 ngAfterViewChecked");
  ngOnDestroy() {
    console.log("我是 ngOnDestroy");
复制代码

结果如下

ngOnChanges()

OnChanges 只对输入的不可变对象起作用。输入属性：使用 @Input 装饰的属性。这里还需要注意不可变对象，在 Angular 中，典型的不可变对象是 string 类型，但所有自定义对象均为可变对象，如： user:{name:string} ，可变对象即使被定义为输入属性，也不会触发 OnChanges 方法。

ngOnChanges 方法参数

一旦检测到该组件(或指令)的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。 ngOnChanges 方法有一个 SimpleChanges 类型的参数，它其实是一个类型为 SimpleChange ，并且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }
该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。
OnInit() 钩子
使用OnInit()有两个原因:
1. 在构造函数之后马上执行复杂的初始化逻辑
2. 在Angular设置完输入属性之后，对该组件进行准备。
另外还要记住，在指令的构造函数完成之前，那些被绑定的输入属性还都没有值。 如果你需要基于这些属性的值来初始化这个指令，这种情况就会出问题。 而当 ngOnInit() 执行的时候，这些属性都已经被正确的赋值过了。
OnDestroy() 钩子
清理一些逻辑###必须###在Angular销毁指令之前运行，把它们放在ngOnDestory()中。
这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和 DOM 事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做，就会有导致内存泄露的风险。
路由跳转时。当一个路由地址跳往另一个路由地址时，前一个路由地址对应的组件会被销毁，后一个路由对应的组件会被创建。
DoCheck() 钩子
使用 DoCheck 钩子来检测那些 Angular 自身无法捕获的变更并采取行动。
DoCheck() 钩子的开销很恐怖，在每次变更检查周期之后，发生变化的地方都会调用它.
AfterView 钩子
AfterView 展示AfterViewInit()和AfterViewChecked()钩子。
angular会在每次创建子组件的子视图后调用它们。
AfterContent 钩子
AfterContent 展示了AfterContentInit()和AfterContentChecked()钩子。
Angular 会在外来内容被投影到组件中之后调用它们。
Angular学习笔记（一） --- 之安装教程
系列学习文章还是继续更新，欢迎小伙伴加入。
  
分类：
 阅读
 
标签：
 
Angular.js
 
  
     
 

        软件开发工程师