延迟事件侦听器添加到谷歌标记

我有一个谷歌地图与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

延迟事件侦听器添加到谷歌标记

回答

相关问题