将编译的角模板传递给HereMaps API

Question

我在我的角度应用程序中使用HereMaps，到目前为止，它运行得很好。我当前的问题是，H.ui.InfoBubble组件只接受普通的html，而不接受角模板。

 let bubble = new H.ui.InfoBubble(
      { lat: data.ride.position.latitude, lng: data.ride.position.longitude },
      // this is currently unfortunately not working, the content gets copied 1:1
      { content: '<app-my-angular-component></app-my-angular-component>'}

我考虑过在一生中编译模板，但在这里没有成功。

谢谢你的帮忙!

Answer 1

您可以传递一个DOM树节点，而不是用HTML传递字符串。因此，您可以获取和组件nativeElement并将其传递给函数。您可以动态创建组件，然后从DOM树中删除它，最后将它传递给气泡。

我做这件事没有什么经验，所以我无法提供例子

Answer 2

谢谢你的提示:kvetis！

这些是取得成果的必要步骤：

// 1. Add your bubble component to entryComponents
...
entryComponents: [BubbleComponent]
...

// 2. Add these includes
import { Component, OnInit, ViewChild, ElementRef, ViewContainerRef,    
    ComponentFactoryResolver } from '@angular/core';

// 3. Init your Viewchild
@ViewChild("map", { static:false, read: ViewContainerRef }) mapContainer: 
    ViewContainerRef

// 4. Create the "factory" on your bubbleComponent in ngOnInit
this.factory = this.resolver.resolveComponentFactory(BubbleComponent);

// 5. Create your component dynamically and it to your Dommarker
let componentRef = this.mapContainer.createComponent(this.factory);
let bubble = new H.ui.InfoBubble(
{ lat: data.ride.position.latitude, lng: data.ride.position.longitude },
   // The FO property holds the province name.
   {
      content: componentRef.location.nativeElement
});

// 6. Don't forget to destroy your component refs on destroy

更多信息可以找到这里。