サードパーティライブラリのangular2変更検出を無効にする方法

Question

1秒あたり100回以上の変更検出をトリガーするGoogleマップがあります。これに対する変更検出を無効にする方法。

地図のプレビューはここをクリック

マウスオーバーイベントを使用するとさらに悪化します。

ngDoCheck() {
  console.log('do check', this.i++);
}

Answer 1

同じ問題が発生しました。コンポーネントコンストラクターにNgZoneクラスを挿入してみてください

constructor(private zone: NgZone) {

)

次に、NgZoneのrunOutsideAngularメソッドを使用して、グーグルチャートの描画メソッドをコールバックに入れ、次のようにします。

this.zone.runOutsideAngular(() => {
    var chart = new google.visualization.PieChart(nativeElement);
    chart.draw(dataTable, options);
})

これにより、実行されたコードが起動しなくなりますangular検出の変更。これを、作成する各チャートに適用します。これが役に立てば幸いです。

このおかげで

Answer 2

変更検出を一時的に無効にする別のオプション ChangeDetectorRef

enabled = true;  
constructor(private ref: ChangeDetectorRef)

toggleChangeDetection() {
  if (this.enabled) 
  {
    this.enabled = false;
    this.ref.detach();
  }
  else {
    this.enabled = true;
    this.ref.reattach();
}