Angular 2 / leaflet map, How to link to a component from marker popup ? … routerLink?

Question

Inside my angular 2 app I have a leaflet map with a popup bound to a onClick event.

The content of the popup has a link to an angular component. however when I use r

Answer 1

**This answer does not work. I will leave it up for now in case someone has a solution. I think it shows the issue that Angular needs SafeHtml for a routerLink (see DomSanitizer ) and Leaflet will only pass a string to a popup using .setContent() or .bindPopup()

The code below is based on Sanitize input in Angular2

export class MapComponent implements AfterViewInit {

  constructor(private _sanitizer: DomSanitizer){}

  private _popUpContent: string = '"Facility" + "
" + "" + "View Two" + ""';

  private htmlProperty(): SafeHtml {
     return this._sanitizer.bypassSecurityTrustHtml(this._popUpContent);
  }

  ngAfterViewInit() {
    let safeLink = this.htmlProperty();

    let openmap = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", {
      attribution: 'terms and feedback'
    });

    let map = L.map("map", {
      center: [33.2148, -97.1331],
      zoom: 5,
      zoomControl: true,
      maxZoom: 18 
    }).addLayer(openmap);

    let marker = L.marker([39.2148, -98.1331]).addTo(map);

    let popup = L.popup();

    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent(safeLink) //throws type error
        .openOn(map);
    }

    map.on('click', onMapClick);
  }
}