角度、setInterval原因のコンポーネントがUIを更新しないようにする

Question

私のDIVの高さの1つを確認するために、子コンポーネントの1つにsetIntervalを設定する必要があります。問題は、このsetIntervalがコンポーネントUIのノンストップアップデート自体を引き起こすことが分かったことです。イベントを親コンポーネントもノンストップ更新それ自体です。

@Component({ 
    selector: 'app-test-comp', 
    template: ` 
    <ul> 
     <li *ngFor="let num of [1,2,3]"> 
     {{ print(num) }} 
     </li> 
    </ul> 
    `, 
}) 
class TestComponent { 
    private attr: Date; 
    constructor() { 
    setInterval(() => {}, 1000) 
    } 
    print(num) { 
    return num + ' ' + new Date(); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <ul> 
     <li *ngFor="let num of [1,2,3,4]">{{ test(num) }}</li> 
     </ul> 
     <app-test-comp></app-test-comp> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    test(num) { 
    return num + ' ' + new Date() 
    } 
} 

PlunkerLink

上記plunkerリンクを参照してください、それは明らかルートコンポーネントとその子コンポーネントがそのUIを更新し続けることを示しています。 app.ts 18行目のsetIntervalを削除すると、通常どおり動作します。

ノンストップアップデートUIの問題の原因とその防止方法を知りたいと思います。

Answer 1

setIntervalのような非同期メソッドは、zone.jsでパッチされたサルであり、モデルが変更された後のビューを更新するために角度から によって使用されるライブラリです。モンキーパッチは、メソッドの機能を拡張することを意味します。 setIntervalが呼び出されるたびに、角度変化の検出が発生してビューが更新されます。

あなたは変化検出を実行しないように、角の外にあなたのコードを実行することができます。

constructor(
    private zone: NgZone 
) { 
    this.zone.runOutsideAngular(() => { 
     setInterval(() => {}, 1000) 
    }) 
} 

私は

Answer 2

角度は、あなたがため、角度がUIを更新している、あなたが実際にパッチを当てたバージョンを使用しているsetIntervalを使用しているのであれば、setTimeoutとsetIntervalなどのzone.jsとゾーン猿パッチのネイティブメソッドに依存します。

この角度を防ぐには、NgZoneというサービスがあります。このサービスは、角度ゾーン外のメソッドを実行する方法を実装しています。例えば

：

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

constructor(private _zone: NgZone) { 
    this._zone.runOutsideAngular(() => { 
    setInterval(() => {}, 1000); // this runs outside of the angular zone 
    this._zone.run(() => { 
     // this runs inside the angular zone 
    }); 

    }); 
} 

角度のゾーンについてのより詳細な説明は、このarticleに見出すことができます。