Angular 2: как добавить проецируемые узлы после динамического создания компонента

Я создаю представление вкладок, которое может динамически создавать вкладки из списка компонентов. Также после того, как эти компоненты были добавлены в 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)

К сожалению, это не работает, потому что вкладки не определены. Если есть другой подход, которого мне не хватает, я был бы открыт для него. Или, если это просто невозможно, я тоже хотел бы знать об этом.


person Erik R    schedule 07.08.2017    source источник