angular - DivIcon 内的 Leaflet Angular 组件

Question

DivIcon 采用 html: string 参数，我目前将大量 html 作为字符串进行连接，以便呈现一个显示不同信息的 divIcon，并通过来自 api 的 3 秒轮询进行刷新。

我需要添加更多信息/样式，并且我的字符串的连接开始变得非常大并且很难正确地使用 CSS。我想将其更改为更清洁的方式。

1:我找不到任何解决方法来将组件用于 DivIcon。

2:我设法提取了一个 Angular 组件的 innerHTML，但是当我添加动态 @input() 时，提取的 HTML 不包含任何动态数据，它只是提取基本模板。 (使用 ComponentFactory 和 ComponentRef.createComponent() )

3:我要尝试的最后一个选项是实例化隐藏组件，然后 getDocumentById 并从中提取纯 HTML。

https://leafletjs.com/reference-1.4.0.html#divicon

Answer 1

嗯，我用选项 1 解决了这个问题，我找到了解决方法。

我可以使用选项 3(实例化隐藏组件并从中提取纯 HTML)，但后来我发现 Marker 有一个我可以使用的 getElement() 方法，它允许我在 DOM 中获取他的 HTMLElement。

所以我绕过了 DivIcon，我只是动态实例化我的组件并将其附加到我的标记 HTMLElement 中，这工作正常，无需再担心 DivIcon。

  constructor(
      private componentFactoryResolver: ComponentFactoryResolver,
      private rendererFactory: RendererFactory2,
  ) {
      this.renderer = rendererFactory.createRenderer(null, null);
  }

    public appendPopupComponentRef(bus: BusDetails,
                               externalConfig: ExternalConfig,
                               el: HTMLElement,
                               vwcRef: ViewContainerRef): void {
    const factory: ComponentFactory<BusCardComponent> = this.componentFactoryResolver.resolveComponentFactory(BusCardComponent);
    const componentRef = vwcRef.createComponent(factory);

    // Custom it using his @Input()
    componentRef.instance.busDetails = bus;
    componentRef.instance.externalConfig = externalConfig;

    // Render popupComponent HTML inside the DOM's marker HTMLElement
    this.renderer.appendChild(el, componentRef.location.nativeElement);
}

其中 el 是我的 marker.getElement(); (您需要将标记放在层内才能定义他的 HTMLElement)

其中 vwcRef 是根 viewContainer。

您的 AppComponent 中需要 constructor(public viewRef: ViewContainerRef) {}

还有这个:

constructor(private appRef: ApplicationRef) {
    this.vwcRef = (appRef.components[0].instance as AppComponent).viewRef;
}