Question

我无法弄清楚如何将一个dinamically创建的组件附加到由外部JS库创建的DOM元素。

这是我的根组件中的代码：

markers.push(
    L.marker(
      [mapEvent.lng, mapEvent.lat],
      {
        icon: L.icon({
          iconUrl: mapEvent.iconURL,
          iconSize: [22, 22],
          iconAnchor: [11, 11] // point of the icon which will correspond to marker's location
        })
      }
    ).bindPopup(
      L.popup(
        {
          closeButton: true
        }
      ).setContent(
        '<template #popupHost></template>'
      )
    )
  );

本质上，这段代码在DOM中创建了一些我没有处理的元素，我想使用setContent方法来放置我自己的代码。我想做的是动态地在其中注入一个组件。

我该如何解决这个问题？

由于

Answer 1

您可以在没有ViewContainerRef的情况下执行此操作，但您应该可以访问要放置动态组件的DOM元素。

首先，您需要创建组件的实例，如：

constructor(
  private resolver: ComponentFactoryResolver, 
  private inj: Injector) {}
...
const factory = this.resolver.resolveComponentFactory(PopupComponent);
this.componentRef = factory.create(this.inj);

然后您需要配置与此组件的通信：

export class PopupComponent {

  text: String;

  @Output() textChanged = new EventEmitter();  
}

this.componentRef.instance.text = popup.options.data;
this.subscription = this.componentRef.instance.textChanged.subscribe((val) => {
        this.data = val;
     });

之后，您需要将组件添加到DOM

someDOMElement.appendChild((this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]);

并最终确保通过角度变化检测来检查您的组件：

host.component.ts

ngDoCheck() {
   if(this.componentRef) {
     this.componentRef.changeDetectorRef.detectChanges();
   }
}

<强> Plunker Example

另见

动态组件到已有的DOM元素中

1 个答案: