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