javascript - Golden Layout + Angular2 RC5 - 无法使用 ViewContainerRef 动态创建组件

Question

我正在尝试动态创建要在 Golden Layout 中注册的组件。例如，

    @ViewChild('placeholder', { read: ViewContainerRef }) viewContainerRef;

ngAfterViewInit(){
    this.myLayout.registerComponent('testComponent', (container, componentState) => {
        //Create an empty div on the container

        container.getElement().html("<div #placeholder></div>");
        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);
        this.cmpRef = this.viewContainerRef.createComponent(this.componentFactory);
        this.cmpRef.changeDetectorRef.detectChanges();
        GlDirective.componentCount++;
    });
    }

但是，因为 viewContainerRef 指的是现在才创建的 ViewChild，所以它始终是未定义的。我们如何在 RC5 中创建一个像上面那样使用动态添加的 div 的组件。我在 Angular 2 dynamic tabs with user-click chosen components 上使用了@Günter Zöchbauer 的回答得出这个。但是不确定如何使用需要动态生成 DOM 的 Golden Layout 来实现。请帮忙。

Answer 1

这是不支持的。

类似 #placeholder 的东西

container.getElement().html("<div #placeholder></div>");

只会被添加到浏览器中，不会被 Angular2 以任何方式识别或处理(出于安全目的的清理除外)。

模板变量只能通过将其静态添加到组件模板来创建。