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

【问题标题】：Pass compiled angular template to HereMaps API将编译的角度模板传递给 HereMaps API
【发布时间】：2019-10-18 08:20:13
【问题描述】：

我在我的 Angular 应用程序中使用 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>'}

我想过在生命周期中编译模板，但在这里没有成功。

感谢您的帮助！

【问题讨论】：

标签： javascript html angular compilation

【解决方案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

【讨论】：

【解决方案2】：

您可以传递 DOM 树节点，而不是使用 HTML 传递字符串。因此，您可以获取组件 nativeElement 并将其传递给函数。您可以create the component dynamically，然后将其从 DOM 树中删除，最后将其传递给气泡。

我没有这方面的经验，所以我无法提供示例

【讨论】：