NgZone的簡單使用

　　在Angular4中，若是模板中有一些變量在組件中常常變更，好比變量foo。

<div>
  我常常變更: {{ foo }}
</div>

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

  foo = 0;

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

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

　　那麼頻繁的變更將形成性能損耗。

　　Angular爲咱們提供了NgZone服務，對於一些頻繁的操做，能夠不去觸發變動檢測。

1、使得Angular不跟蹤變化

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

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

1   constructor(
2     private zone: NgZone
3   ) { }

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

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

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

2、從新跟蹤變化

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

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

那麼1秒後模板中的foo會獲得更新。