遅延はそれに10個のマーカーで

Question

私が持っているグーグルマップGoogleマーカーに加えて、Angular2 SideNavは次のようにページに追加：私は私のコンポーネントで

<mat-sidenav-container> 
    <div id="map">Google Map [Code omitted]</div> 
    <mat-sidenav #sidenav position="end" align="end" class="user-sidenav"></mat-sidenav> 
</mat-sidenav-container>` 

：

@ViewChild(MatSidenav) sidenav: MatSidenav; 
// ... 

各マーカーは、イベントリスナーは、次のコードでそれに加えた：

google.maps.event.addListener(gmr, 'click', (function(marker) { 
    return function() { 
     self.handleMarkerClick(marker); 
    }; 
})(gmr)); 

gmrでありますgoogle.maps.Markerとself = this

handleMarkerClick次のようになります。

private handleMarkerClick(marker: any) { 
    this.sidenav.open(); 
    console.log('sidenav open'); 
} 

それがない唯一の事はある角度マテリアルSidenavを開きます。マーカーをクリックすると、sidenavが開く前に2〜3秒の遅延があります。 console.log()の助けを借りて、私は 'sidenav open'がマーカーをクリックするのと同じ瞬間に印刷されていることがわかりますが、sidenavアニメーションは2〜3秒後に開始します。

ただ、テスト目的のために、私は私のHTMLにボタンを追加しました：

<button mat-button (click)="sidenav.toggle()">Open sidenav</button> 

そしてsidenavはこれですぐに開きます。

誰かが、なぜHTMLからではなくコンポーネントからsidenavを開くのに遅延があるのか​​を知りませんか？

編集：遅延の範囲は1〜3秒です。時には速いですが、時には遅い場合もあります。

Edit2：別のテストを行い、独自のsidenavソリューション（いくつかのhtml、アニメーションなど）を思いついた。また、コンポーネントから呼び出されたときにはまだ遅いので、Angular Materialの問題ではありません。すべての手がかりは？

Answer 1

私は何が起こっていたかを知りました。私がやった

最初のものは、再書かれているこのようなマーカーをGoogleにも、リスナーを追加するコード：

gmr.addListener('click',() => { 
    this.handleMarkerClick(gmr); 
}); 

それから私は物事の多くはZone.js.で起こっていることに気づきました私はそれが何であるかの手がかりを持っていませんでした。

ゾーンは、非同期タスク間で持続する実行コンテキストです。 は、JavaScript VMのスレッドローカルストレージと考えることができます。 （handleMarkerClick()で更新される）sidenavが角度のゾーンの外に更新されるため

[github.com/angular/zone.jsから]は、UIが正しく更新されないであろうが判明しました。

gmr.addListener('click',() => { 
    this.zone.run(() => { 
     this.handleMarkerClick(gmr); 
    }); 
}); 

クラスのコンストラクタに追加'@angular/core'とzone変数から含める必要がありNgZone：だから我々は正しい更新プログラムを取得するためにthis.zone.runを含める必要があります。

マップは現在飛行しており、イベントハンドラは遅れのないサイドパネルを切り替えます。