コンポーネントのリストからタブを動的に作成できるタブ ビューを作成しています。また、これらのコンポーネントが DOM に追加された後、ボタンで追加できるようにしたいと考えています。
ユーザー yurzui の助けのおかげで、コンポーネントの初期作成を機能させることができました (こちらを参照)。課題は、Tabs コンポーネントが作成されると、動的に作成されたタブを追加するために投影可能なノード リストにアクセスできないことです。
これがプランクです:
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 に尋ねるのは難しいかもしれません。そのことを念頭に置いて、この既にインスタンス化された TabsRef にタブを追加するのに役立つメソッドが ComponentRef にあるかどうかを調べました。
これは近いです:
this.tabsRef.location.nativeElement.tabs.push(tabRef.instance)
残念ながら、タブが定義されていないため、これは機能しません。私が見逃している別のアプローチがあれば、私はそれを受け入れます。または、これが不可能な場合は、それも知りたいです。