angular - 调用传单标记的onClick时，材质对话框卡住

Question

我有一个项目，我有一张地图（使用ngx-leaflet）。单击
标记时， 我想显示来自Angular Material的 Dialog 。

对话框打开，但是当我单击关闭按钮时，它再次重新打开然后关闭。

我尝试了什么：

• 使用超时延迟对话
• 触发打开对话框的主题
• 删除和创建新对话框
• 在 ngx-leaflet 和 angular-material 的问题中搜索此错误

我发现了什么：

• 在发生某些事情后触发所有生命周期钩子（点击，背后的 js 事件，任何事情）
• 对话框可以随心所欲地简单，它不会改变任何东西
• 当我在对话框关闭时再次打开对话框时（在对话框的afterClosed中）它正常工作

示例代码的进一步解释：

• 在 App.component.ts 我将一个事件处理程序绑定到每个标记，然后在另一个函数中打开对话框
• 该代码是我在网上找到的这个项目的一个分支（只是更新了依赖项）

演示

我在这里做了一个演示：示例项目。

Answer 1

原因是您在“Angular World”之外触发了模式的打开，因为它与click谷歌地图标记上的事件相关联。然后你就会有这些类型的不一致。

2个解决方案：

• 使用agm-map库，它将 angularify 谷歌地图 API
• 继续直接使用谷歌地图 API，但添加 NgZone 以明确告诉您要在角度世界中执行一些代码：

m.addEventListener("click", ()=> { this.zone.run(() => {this.openExampleDialog();}) })

在这里工作小提琴