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

标签 angular leaflet angular6 angular-material-6 ngx-leaflet

我有一个项目,其中有一张 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/

相关文章:

leaflet - 自定义 Leaflet map 上标记的聚类

Angular 6 - 找不到模块 "@angular-devkit/build-angular"

javascript - Angular 5 Typescript 表示 webpack 失败,因为响应类型上不存在属性数据

angular - 如何使用 Angular 管从最后一个索引中切片数字?

javascript - 如何替换因丢失或错误图像 src 而损坏的 HTML img

Angular Material 扩展面板错误 - TypeError : this. driver.containsElement is not a function

html - 使用angular 6单击输入后如何更改框阴影?

html - Angular Flickity 改变元素

jupyter-notebook - 在 Ubuntu Linux 20.04 上彻底卸载并重新安装 Jupyter-Lab 和 ipyleaflet 的步骤

javascript - 多边形填充不明显?