在 Angular5 应用程序的传单弹出窗口中调用 zone.run

Question

我们有一个带有嵌入式传单地图的 angular5 应用程序。该地图将弹出窗口绑定到各个点，这些点又打开了一个详细信息组件。这个复杂的过程在 chrome 和 firefox 中运行良好，但在 Internet Explorer 中因神秘的 "Syntax error" 而失败。您可以在以下位置查看该应用程序： http://ptappdev.gisdata.mn.gov/ptappt

单击任意地图标记，然后单击 "view details"。

如果 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>

关于这是区域语法错误还是我的嵌套引号有问题的任何想法。或者也许完全是别的东西？如有任何帮助，我将不胜感激。

Answer 1

箭头函数已在 ES2015 中引入，are not supported 在 Internet Explorer 中引入。

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

Answer 2

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

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

在 Angular5 应用程序的传单弹出窗口中调用 zone.run

Calling zone.run in leaflet popup within Angular5 app

javascript

zone

leaflet

angular5