3

コンポーネントのリストからタブを動的に作成できるタブ ビューを作成しています。また、これらのコンポーネントが 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)

残念ながら、タブが定義されていないため、これは機能しません。私が見逃している別のアプローチがあれば、私はそれを受け入れます。または、これが不可能な場合は、それも知りたいです。

4

0 に答える 0