如何使用ngTemplateOutlet绑定动态创建的组件的输入和输出？

Question

我需要创建包含组件的主机组件，以在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在那里而无法定义，因此无法添加更多标签。

有什么解决办法吗？

我已经推荐了Angular Documentation