在Angular5 app中的leaflet弹出窗口中调用zone.run

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Angular5 app中的leaflet弹出窗口中调用zone.run相关的知识,希望对你有一定的参考价值。

我们有一个带有嵌入式传单映射的angular5应用程序。此映射将弹出窗口绑定到各个点,然后打开详细信息组件。这个复杂的过程在chrome和firefox中运行良好,但在Internet Explorer中出现了一个神秘的“语法错误”。您可以在以下位置查看该应用:http://ptappdev.gisdata.mn.gov/ptappt

单击任何地图标记,然后单击“查看详细信息”。

如果它是javascript嵌套引号的问题我尝试了一系列的转义模式。仍然没有运气。生成此弹出窗口的代码是:

        layer.bindPopup('<p>' + feature.properties[Object.keys(feature.properties)[0]] + '<br /><a target="_blank" href="' + feature.properties['park_home_page_url']
      + '">open website</a><br /><a href="javascript:void(0);" '
      + 'OnClick = "'
    //+ 'alert(&apos;test&apos;);'
      + 'window[&apos;angularComponentRef&apos;].zone.run(() => {window[&apos;angularComponentRef&apos;].component.showResultDtlViaMapTip('
      + '&quot;' + feature.properties['name'] + '&quot;,'
      + '&quot;' + feature.properties['id'] + '&quot;,'
      + '&quot;' + feature.properties['park_admin_id'] + '&quot;'
      + ');})'
      + '" style="cursor: pointer; cursor: hand; ">view details</a></p>'); // 1 initial load
  }
}).addTo(this.map)//.on('click', this.onMarkerClick);

生成的html是:

<a href="javascript:void(0);" onclick="window['angularComponentRef'].zone.run(() => {window['angularComponentRef'].component.showResultDtlViaMapTip(&quot;Upper Sioux Agency State Park&quot;,&quot;530&quot;,&quot;spk00277&quot;);})" style="cursor: pointer; cursor: hand;">view details</a>

关于这是带语法的语法错误还是嵌套引号问题的任何想法。或者完全是其他的东西?如有任何帮助,我将不胜感激。

答案

在ES2015中引入了箭头功能,在Internet Explorer中引入了are not supported

您的表达式看起来与使用普通的function兼容,因此只需用正常的箭头替换箭头函数就可以解决语法错误,同时保留功能。

另一答案

感谢您的修复建议。作为参考,这里是新的功能重写代码,不使用箭头功能:

<span onclick="window['angularComponentRef'].zone.run(function() {return window['angularComponentRef'].component.showResultDtlViaMapTip('Hill-Annex Mine State Park','210','spk00176')});">view details</span>

以上是关于在Angular5 app中的leaflet弹出窗口中调用zone.run的主要内容,如果未能解决你的问题,请参考以下文章

flutter 实现弹出窗 点击下拉栏 微信右上角弹出窗

DuiVision开发教程(18)-弹出窗

wpf 右下角弹出窗

百度统计 可以统计页面上的JS的弹出窗的打开次数吗? 怎么实现?

javascript 列出Leaflet功能弹出窗口中的所有非空字段和值

javascript--自定义弹出登陆窗口(弹出窗)