延遲事件偵聽器添加到谷歌標記

我有一個谷歌地圖與10個標記上它和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」打印的效果與點擊標記時相同，但是在2-3秒後啓動sidenav動畫。

只是爲了測試目的，我添加了一個按鈕，我的HTML：

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

而且sidenav這個瞬間打開。

有沒有人有線索爲什麼延遲從組件打開sidenav而不是從HTML打開？

編輯：延時範圍從1秒到3秒。有時速度更快，有時速度更慢。

Edit2：我做了另一個測試，想出了一個自定義的sidenav解決方案（一些html，動畫等基本上覆制了Angular Material sidenav）。從組件調用時它仍然很慢，所以它不是Angular Material問題。任何線索？

來源

2017-11-11 Paul Strupeikis

你能告訴我們你的**完整代碼**嗎？它可能有幫助。 – Edric

Edric，這是負責sidenav的唯一代碼。我更新了我的問題，並提供了更多細節。 –

原來，它與Angular Material沒有任何關係，但事件監聽器已添加到Google標記中。 –

我已經找出發生了什麼事。

第一件事，我所做的是重新編寫代碼，增添了聽衆谷歌這樣的標記：

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

然後我發現很多東西都與Zone.js.回事我不知道它是什麼。

Zone是跨越異步任務持續存在的執行上下文。您可以將其視爲用於JavaScript VM的線程本地存儲。 [從github.com/angular/zone.js]

原來因爲sidenav（在handleMarkerClick()更新）爲角的區域之外，UI的更新將無法正常更新。因此，我們必須包括this.zone.run，以獲得正確的更新：需要

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

NgZone要包含在類的構造函數中添加'@angular/core'和zone變量。

地圖現在正在飛行，事件處理程序根本沒有滯後地切換sidenav面板。

來源

2017-11-12 19:00:32

延遲事件偵聽器添加到谷歌標記

回答

相關問題