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

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

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

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

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

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

第一 – 角度领域.

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

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

这些被称为ComponentRef和TemplateRef

所以,我们有两种方法可以解决这个问题.由于我不能同时使用ComponentRef,但请注意您也可以使用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 cmpFactory = 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行的代码执行弹出窗口的定位.

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

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

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

希望能帮助到你.