在渲染后创建的 DOM 元素中加载 Angular 2 组件

Question

使用 Angular 2.0（最终版本），在应用程序引导后，如何在由非 Angular 库创建的 DOM 元素中加载 Component并且发生了组件渲染？

I had previously used DynamicComponentLoader.loadNextToLocation() to load Components inside of DOM elements, but that was deprecated as of RC5.

问题 (TL;DR)

我正在尝试使用 Angular 2.0 在弹出窗口 window 中插入动态创建的组件，该组件在运行时由外部非 Angular 库生成（具体来说，ESRI ArcGIS JavaScript API 3.x 地图的 InfoWindow/Popup）。

由于弹出 window 完全由外部库 after app bootstrap 和父组件的 ngAfterViewInit()/ngAfterContentInit() 事件发生，任何新添加的 DOM 弹出窗口中出现的 #ref 标记将被忽略。如果没有 #ref 标签和派生的 ViewContainerRef，我不知道如何在弹出窗口中插入新组件。

代码

我正在使用中显示的相同设置，即：

@ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef})
protected dynamicComponentTarget: ViewContainerRef;

// this will be reference to dynamic content - to be able to destroy it
protected componentRef: ComponentRef<IHaveDynamicData>;

this.compiler
.compileComponentAsync<IHaveDynamicData>(dynamicType, MyModule)
.then((factory: ng.ComponentFactory<IHaveDynamicData>) =>
{
    // our component will be inserted after #dynamicContentPlaceHolder
    this.componentRef = this.dynamicComponentTarget.createComponent(factory,     0);

    // and here we have access to our dynamic component
    let component: IHaveDynamicData = this.componentRef.instance;

    component.entity = this.entity;
});

Note: Based on @MarkRajcok's post here, I had the idea to try ChangeDetectorRef.detectChanges() to trigger a re-render of the parent Component, with the hope that a #ref tag in the newly-created popup's DOM would be picked up and compiled. But, likely due to my inexperience with Angular 2.0, I've so far had no luck. Perhaps this a misguided approach all together?

Answer 1

我这样做了，但感觉完全是黑客攻击......它确实在 dom 元素位置渲染了组件，不过

var me = this;
setTimeout(function(){ 
  var simpleComponent = me.componentFactoryResolver.resolveComponentFactory(SimpleComponent);
  me.componentRef = me.dynamicTarget.createComponent(simpleComponent);
                var node = document.getElementById("theTest");
                node.appendChild(me.componentRef['_hostElement'].nativeElement);
}, 10);

在渲染后创建的 DOM 元素中加载 Angular 2 组件

Loading Angular 2 Component in a DOM element created after rendering

typescript

arcgis-js-api

angular

代码