我有一个项目,其中有一张 map (使用 ngx-leaflet )。
单击 我想显示一个来自 Angular Material 的对话框.
对话框打开,但当我单击关闭按钮时,它再次重新打开然后关闭。
我尝试了什么:
- 使用 Timeout 延迟对话
- 触发打开对话框的主题
- 删除并创建一个新的对话框
- 在 ngx-leaflet 和 angular-material 的问题中搜索这个错误
我发现了什么:
- 所有生命周期钩子(Hook)在某些事情发生后被触发(点击,背后的 js 事件,任何事情)
- Dialog可以简单到我想要的,它不会改变任何东西
- 当我在对话框关闭时(在对话框的afterClosed 中)再次打开对话框时,它可以正常工作
示例代码的进一步说明:
- 在 App.component.ts 中,我将事件处理程序绑定(bind)到每个标记,然后在另一个函数中打开对话框
- 代码是this project i found on the net 的分支(仅具有更新的依赖项)
演示
我在这里做了一个演示:Example Project .
最佳答案
原因是您触发了“Angular 世界”之外的模态打开,因为它与谷歌地图标记上的 click
事件相关联。然后就会出现这些类型的不一致。
2 种解决方案:
- 使用agm-map将谷歌地图 API Angular 化的库
- 继续直接使用 google map API,但添加 NgZone 以明确告诉您要在 Angular 世界中执行一些代码:
m.addEventListener("点击", ()=> {
this.zone.run(() => {this.openExampleDialog();})
})
工作 fiddle here
关于angular - 调用传单标记的 onClick 时 Material 对话框卡住,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51733019/