DivIcon 采用 html: string 参数,我目前将大量 html 作为字符串进行连接,以便呈现一个显示不同信息的 divIcon,并通过来自 api 的 3 秒轮询进行刷新。
我需要添加更多信息/样式,并且我的字符串的连接开始变得非常大并且很难正确地使用 CSS。我想将其更改为更清洁的方式。
1:我找不到任何解决方法来将组件用于 DivIcon。
2:我设法提取了一个 Angular 组件的 innerHTML,但是当我添加动态 @input() 时,提取的 HTML 不包含任何动态数据,它只是提取基本模板。 (使用 ComponentFactory 和 ComponentRef.createComponent() )
3:我要尝试的最后一个选项是实例化隐藏组件,然后 getDocumentById 并从中提取纯 HTML。
最佳答案
嗯,我用选项 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;
}
关于angular - DivIcon 内的 Leaflet Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54576186/