Search code examples
javascriptleafletangular5zone

Calling zone.run in leaflet popup within Angular5 app

We have an angular5 application with an embedded leaflet map. This map binds a popup to various points which in turn open a details component. This convoluted process works fine in chrome and firefox but is failing with an enigmatic "Syntax error" in Internet Explorer. You can view the app at: http://ptappdev.gisdata.mn.gov/ptappt

Click on any of the map markers and then click "view details".

In case it is a problem with javascript nested quotes I have tried a whole range of escaping patters. Still no luck. The code generating this popup is:

        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);

The resulting html is:

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

Any ideas on whether this is a syntax error with zone or a problem with my nested quotes. Or perhaps something else entirely? I would be grateful for any assistance.

Solution

  • Arrow functions have been introduced in ES2015 and are not supported in Internet Explorer.

    Your expression looks compatible with the use of a normal function, so simply replacing your arrow function by a normal one should solve your syntax error while preserving functionality.