Javascript 如何在角度组件中定义完整选项卡？

我想将包含一个

和几个

的大角度组件拆分为：

• 定义

• 子组件各自定义自己的

父级的模板如下所示：

每个孩子看起来都像：

...

子对象已正确初始化，没有错误，但不会呈现给DOM。如果我将每个

都放在父组件中，并且在子组件中只有选项卡内容，那么它会像预期的那样工作

但这并不是解决我问题的正确方法：鉴于子组件需要呈现选项卡标签，让父组件负责这一点似乎是不对的

我的理解是

元素必须是

的直接子元素才能正确呈现，我的

可以防止这种情况

---

在子组件中定义

的最佳方法是什么？

您可以根据视图模型创建选项卡列表，然后执行以下操作：

 <mat-tab-group [(selectedIndex)]="tabIndex">
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.Title">
      <ng-template mat-tab-label>
        <span> {{tab.Title}}</span>
      </ng-template>
      <dynamic-content [TabComponent]="tab"></dynamic-content>
    </mat-tab>
  </mat-tab-group>

{{tab.Title}}

---

然后根据选项卡项单击调用组件库，实际上使用动态组件。

能否提供Stackblitz解决方案？确切地说，元素必须是的直接子元素才能正确渲染。如果将mat tab添加为直接子级，并在其中添加组件，会怎么样？@dhanushkac如果我没有找到其他方法，我会这样做，但选项卡的标签取决于子组件的行为，因此我更希望在子级而不是父级中呈现标签。