Question

DivIcon使用html：字符串参数，我目前将许多html连接为字符串，以渲染一个divIcon，该apiIcon通过api的3秒钟轮询显示显示不同信息的信息。

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

1：为了在DivIcon中使用组件，我找不到任何解决方法。

2：我设法提取了角度组件的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;
}

DivIcon内的传单角组件

1 个答案: