我正在制作一个可以从组件列表动态创建选项卡的选项卡视图。此外,在将这些组件添加到 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)
可悲的是,这不起作用,因为选项卡未定义。如果我缺少另一种方法,我会对此持开放态度。或者,如果这是不可能的,我也想知道。