Angular DivIcon内的小叶角组件

DivIcon使用了一个html:string参数，我目前将许多html转换为字符串，以便呈现一个DivIcon，它显示不同的信息，并通过api的3秒轮询刷新

我需要添加更多的信息/样式，我的字符串的连接开始变得非常大，很难正确使用css。我想换一种更干净的方式

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

2：我设法提取了角度组件的innerHTML，但当我添加dynamic@input（）时，提取的HTML不包含任何动态数据，它只提取基本模板。（使用ComponentFactory和ComponentRef.createComponent（））

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

---

好吧，我用选项1解决了这个问题，我找到了一个解决办法

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

所以我绕过了DivIcon，我只是动态地实例化了我的组件，并将其附加到我的marker HtmleElement中，这很好，不再需要担心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);
}

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