3

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

感谢用户 yurzui 的帮助，我能够进行组件的初始创建工作（参见此处）。挑战是一旦创建了选项卡组件，我就无法访问可投影节点列表来将动态创建的选项卡添加到其中。

这是笨拙的：

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)

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

4

0 回答 0