Angular 2 / leaflet map,如何从标记弹出窗口链接到组件？ … routerLink？

@Component({
  SELEctor: 'app-map',templateUrl: './map.component.html',styleUrls: ['./map.component.css']
})

export class MapComponent implements AfterViewInit {

  openmap: any;

  constructor() { }

  ngAfterViewInit() {

    let openmap = l.tileLayer("@R_197_10107@://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("Facility" + "<br/>" + "<a routerLink='/view2'>" + "View Two" + "</a>")
        .openOn(map);
    }

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

}

.setContent("Facility" + "<br/>" + "<a href='../view2'>" + "View Two" + "</a>")

有一个非常简单的方法和一个非常复杂的方法.

简单的方法是在没有RouterLink的情况下使用带有angular元素的原始HTMl.注册该锚点元素的点击并使用路由器服务进行导航.

任务是发射链接,但实际问题更深入,现在它链接下次显示一个角度组件…

因此,对于复杂的解决方案：

这是一个非常高级的主题……不仅涉及使用先进的角度技术,它在传单实现中也是先进的.

我将尽力传达信息,但由于复杂性,示例将非常简单并且需要工作.

第一 – 角度领域.

包含指令,组件或管道的HTML字符串永远不会起作用,唯一的方法是初始化View

让我们将A View定义为查看组件或模板实例的参考.

这些被称为ComponentRef和TemplateRef

所以,我们有两种方法可以解决这个问题.由于我不能同时使用COR_318_11845@ponentRef,但请注意您也可以使用TemplateRef.
使用模板,您首先需要获取组件中定义的模板以及将该模板附加到的ViewContainerRef.

我们将构建一个接受传单Marker并绑定到标记的click事件的服务,点击它将打开一个弹出窗口,它是一个角度组件.

组件很简单,它呈现链接.

@Component({
  SELEctor: 'facility-link',template: `Facility <br/> <a routerLink="{{link}}"> View Two</a>`
})
export class FacilityLinkComponent {
  public link: String;
  constructor() { }
}

现在,为服务：

@Injectable()
export class LinkPopupservice {

  constructor(private cfr: ComponentFactoryResolver,private injector: Injector,private appRef: ApplicationRef) { }


  register(marker: leaflet.Marker,link: String): void  {
    marker.on('click',($event: leaflet.MouseEvent)  => this.popup($event.target,link) );
  }

  popup(marker: leaflet.Marker,link: String) {
    const cR_318_11845@pFactory = this.cfr.resolveComponentFactory(FacilityLinkComponent);
    const componentRef = cmpFactory.create(this.injector);
    componentRef.instance.link = link;
    this.appRef.attachView(componentRef.hostView);
    const markerElement = marker.getElement();
    markerElement.parentElement.appendChild(componentRef.LOCATIOn.nativeElement);

    const markerPos = leaflet.DomUtil.getPosition(markerElement);
    const markerClass = leaflet.DomUtil.getClass(markerElement);


    leaflet.DomUtil.setTransform(componentRef.LOCATIOn.nativeElement,markerPos);
    leaflet.DomUtil.setClass(componentRef.LOCATIOn.nativeElement,markerClass);
  }
}

register方法接受标记和链接并注册click事件.

当弹出方法触发时,它使用角度工具创建FacilityLinkComponent的视图实例,设置未来绑定的链接,将视图附加到它并将其附加到DOm.

这一切都发生在前5行代码中.

一些说明：

>我们必须附加一个视图,以便更改检测工作
>正确的实现将允许设置ViewContainerRef和/或Injector – 这是使用延迟加载时必须的.
>最好通过Injector将数据发送到组件,而不是通过赋值(ReflectiveInjector)
>需要正确清理(破坏组件并分离视图)
>需要添加切换逻辑,也可以在导航上清理.

传单

第6行的代码执行弹出窗口的定位.

这是一个非常简单的逻辑,它只是复制标记中的所有内容.

这就是我使用标记的原因,所以我将有一个参考来定位.

在一个真实世界的例子中,你需要获得一个面板并将组件推入他们自己的层,计算位置.这并不困难,因为传单有所有的帮助,但它太多了.

希望能帮助到你.