Leaflet Угловой компонент внутри DivIcon

Question

DivIcon принимает параметр html: string, в настоящее время я объединяю множество html в виде строки, чтобы визуализировать divIcon, отображающий различную информацию, обновляющуюся с помощью 3-секундного опроса API.

Мне нужнодобавьте больше информации / стилей, и конкатенация моих строк станет действительно большой и трудной для правильного css.Я хочу изменить его на более чистый способ.

1: я не могу найти никакого обходного пути для использования компонента в DivIcon.

2: мне удалось извлечь innerHTML угловогокомпонента, но когда я добавляю dynamic @input (), извлеченный HTML не содержит динамических данных, он просто извлекает базовый шаблон.(Используя ComponentFactory и ComponentRef.createComponent ())

3: последний вариант, который я собираюсь попробовать, - создать экземпляры скрытых компонентов, а затем получить их с помощью getDocumentById и извлечь из него чистый HTML.

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

Answer 1

Что ж, я решил это с помощью опции 1, я нашел обходной путь.

У меня был включен вариант 3 (создание скрытых компонентов и извлечение из него чистого HTML), но затем я понял, что Markerу меня есть метод getElement (), который я могу использовать, что позволяет мне получить его HTMLElement в DOM.

Итак, я обошел 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 - мой маркер.getElement ();(Маркер должен находиться внутри слоя, чтобы определить его HTMLElement)

Где vwcRef - корневой viewContainer.

вам нужно constructor(public viewRef: ViewContainerRef) {} в вашем AppComponent

а это:

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