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