Мне нужно создать хост-компонент, который принимает компоненты, для рендеринга внутри mat-tab. Компоненты предоставляются внутри списка, и он может быть различным. Поскольку мы не знаем, какой компонент визуализировать, как мы можем связать входы и выходы с родительским представлением (хостом) и динамически созданным компонентом.
Пример:
<div *ngFor="let tab of tababList">
<mat-tab *ngIf="tab.isVisible">
<ng-template mat-tab-label>{{tab.title|translate}}</ng-template>
<ng-container *ngTemplateOutlet="tab.component"></ng-container>
</mat-tab>
</div>
Для альтернативного подхода я рассмотрел ViewContainerRef с методом ComponentFactoryResolver. Таким образом, ViewContainerRef стал неопределенным, поскольку *ngIf был там, и не может добавить больше вкладок.
Есть какие-нибудь решения по этому вопросу?
Я ссылался Угловая документация