Angular 2：如何在动态创建组件后添加可投影节点

Question

我正在创建一个可以从组件列表中动态创建标签的标签视图。在将这些组件添加到DOM之后，我希望能够使用按钮添加它们。

感谢用户yurzui的帮助，我能够初步创建组件（参见here）。挑战是创建Tabs组件后，我无法访问可投影节点列表以向其添加动态创建的选项卡。

以下是plunk：

addTab(){
    //this.viewContainer.clear()

    let compFactory = this.compFR.resolveComponentFactory(FinalizeTab);
    let compRef = this.viewContainer.createComponent(compFactory);

    let tabFactory = this.compFR.resolveComponentFactory(Tab);
    let tabRef = this.viewContainer.createComponent(tabFactory,this.viewContainer.length - 1, undefined, [[compRef.location.nativeElement]]);
    tabRef.instance.title = compRef.name;


    this.transTabRefs.push(tabRef.location.nativeElement);
    this.tabsRef.instance.tabs.push(tabRef.instance)
    console.log("An array of tab references's elements to be the projectable nodes" ,this.transTabRefs);
    console.log("An array of tabs", this.tabsRef.instance.tabs.length);
}

我知道每次添加标签时我都可以重新创建标签组件：

    let tabsFactory = this.compFR.resolveComponentFactory(Tabs);

    let tRefs = this.viewContainer.createComponent(tabsFactory,0,undefined,[this.transTabRefs]);
    tRefs.instance.initContent(this.tabsRef.instance.tabs);

虽然我想避免这种情况，因为这些组件可能变得非常复杂，加载时间可能不合理。

我觉得在创建组件后直接访问可投影节点可能是要求API的一个延伸。考虑到这一点，我已经查看是否可以在ComponentRef上找到一些方法来帮助在已经实例化的TabsRef上添加选项卡。

这很接近：

this.tabsRef.location.nativeElement.tabs.push(tabRef.instance)

可悲的是，这并不起作用，因为标签未定义。如果还有另一种方法，我会缺席，我会对此持开放态度。或者，如果这不可能，我也想知道。