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';

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

　　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会得到更新。　　　　　　　　　

 

转载于:https://www.cnblogs.com/steven38-27/p/7698827.html