javascript - 将编译的 Angular 模板传递给 HereMaps API

Question

我在我的 Angular 应用程序中使用 HereMaps，到目前为止它运行良好。我当前的问题是，H.ui.InfoBubble 组件仅接受纯 html，不接受 Angular 模板。

 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

感谢您的提示@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

更多信息可参见here