本文内容

阅读有关元件的 lifecycle hook - ngDoCheck 的内容

ngDoCheck

呼叫时机: 在每一次 ngOnChanges 呼叫结束後就会被呼叫。在首次的 ngOnInit 完成後，就会立即被呼叫。
在昨天的文章中，我们有介绍到了 ngOnChanges 的特性，当某个 @Input 属性去参照了某个物件，但该物件只有改变其内部属性成员的值，并没有指向一个更新後的物件位址的话，是不会触发 ngOnChanges 的 lifecycle hook 的。

那万一，我们真的很想要在该物件内容被更改的时候，通知我们它被更动的话要怎麽办呢?
这个时候，就可以使用 ngDoCheck 这个 lifecycle hook 来达成以上的效果罗~
这边来写个小范例

[childComponent - View]

<div>
  <p>
    <label for="name">Hero Name</label>
    <input type="text" id="name" [(ngModel)]="hero.name" />
  </p>
  <p>
    <label for="power">Hero Power</label>
    <input type="text" id="power" [(ngModel)]="hero.power" />
  </p>
</div>

[childComponent - TypeScript]

export class HeroComponent implements OnInit, OnChanges, DoCheck {
  @Input() hero;

  constructor() {}

  ngOnInit() {}

  ngDoCheck() {
    console.log('ngDoCheck');
  }

  ngOnChanges() {
    console.log('ngOnChanges');
  }
}

[parentComponent - View]

<app-hero [hero]="hero"></app-hero>

[parentComponent - TypeScript]

export class AppComponent {
  hero = {
    name: 'wu-kung',
    power: 'HaMeHaMeHa',
  };
}

以上的范例，可以看到在子元件的部分，定义了一个 @Input 属性 hero 取得父元件的 hero 资料。
并且在子元件定义了 ngDoCheck 和 ngOnChanges 来看看，当改变 hero 的属性内容的时候，是哪一个 lifecycle hook 会被驱动。
操作如下

可以看到，当改变 input 栏位的内容时，只有 ngDoCheck 会触发，就算是只有点击 input 栏位，也会触发到 ngDoCheck。反观 ngOnChanges 是一次都没有被触发到。

ngDoCheck 使用时机

当你有一些内容真的想要监测的话，又无法被 ngOnChanges 监测到的时候，就可以使用 ngDoCheck 了。
但是，如同上面范例操作的那样，ngDoCheck 是非常容易就被触发了，如果你在 ngDoCheck 里面放入太大量或复杂的运算的话，是很有可能会严重影响你的产品的运行速度，进而让使用者有不好的体验的。

所以，在 ngDoCheck 的内容应该要放一些比较轻量的内容才对。

Summary

来做个总结

1. 若我们有一些特别想要观察的内容，特别像是 @Input 属性的某些物件的内容的变化，我们就可以使用 ngDoCheck 来达到这种效果，来突破 ngOnChanges 的限制。