NgZone的簡單使用

　　在Angular4中，如果模板中有一些變量在組件中經常變動，比如變量foo。

<div>
  我經常變動: {{ foo }}
</div>

　　在組件中它的初始值為0。

  foo = 0;

　　假設在組件中有個循環，不斷更新foo的值。

      for (let i = 0; i < 100; i++) {
        setInterval(() => this.counter++, 10);
      }

　　那么頻繁的變動將造成性能損耗。

　　Angular為我們提供了NgZone服務，對於一些頻繁的操作，可以不去觸發變更檢測。

一、使得Angular不跟蹤變化

　　1、在組件中引入NgZone，再將其注入。

import { NgZone } from '@angular/core';

  constructor(
    private zone: NgZone
  ) { }

　　2、調用runOutsideAngular方法，Angular不會對里面的變化進行跟蹤。

    this.zone.runOutsideAngular(() => {
      for (let i = 0; i < 100; i++) {
        setInterval(() => this.counter++, 10);
      }
    });

setInterval每隔一秒更新foo，而此時模板中的foo將不會有變化。

二、重新跟蹤變化

　　如果此時又想讓Angular跟蹤foo的變化，用其提供的run方法。

this.zone.run(() => {
　　setTimeout(() => this.foo = this.foo, 1000);
});

那么1秒后模板中的foo會得到更新。