Angular 如果选项卡标题位于第二个组件（角度）中，则不显示该选项卡标题

我将材质css框架与Angular（两个最新版本）结合使用。当我在一个组件中创建选项卡时，一切正常。当我将每个选项卡作为一个单独的组件时，选项卡标题就会停止工作（选项卡功能本身及其内容仍然可以正常工作）。代码如下：

这是单个组件模板的外观（当一切正常时）：

测试
测试2

下面是我使用2个组件时的代码（以及选项卡标题不起作用时的代码）：

我的问题是：为什么会发生这种情况以及如何解决这个问题？
谢谢您的帮助。
我还没有找到这个问题的解决方案，但我解决了这个问题：我将标题留在主组件中，并将选项卡内容粘贴到单独的选项卡组件中。
主要部件代码：

    <mat-tab-group mat-align-tabs="start">
      <mat-tab *ngFor="let colors_hue of globalService.colors_hues; let i = index">
        <ng-template mat-tab-label>
         test
        </ng-template>
        <app-hue>
        </app-hue>
      </mat-tab>
    </mat-tab-group>

这足以让一切按我的计划进行。因此，我没有进一步寻求我的问题的答案。然而，发生这种情况的原因仍然很有趣。因此，如果有人遇到这个问题，请毫不犹豫地回答

至于maury844的评论，是的，谢谢，而且从一开始就很清楚Angular会生成额外的代码（层）。但是在一个组件中，他也生成了它，一切都正常。
当你将
ng模板
封装到app hue中时，你可以在
mat选项卡
和
mat选项卡标签
之间添加一个“层”，你可以检查你的HTML以更好地理解这一点
<mat-tab-group mat-align-tabs="start">
  <mat-tab *ngFor="let colors_hue of globalService.colors_hues; let i = index">
    <app-hue>
    </app-hue>
  </mat-tab>
</mat-tab-group>

<ng-template mat-tab-label>
  test
</ng-template>
test2

    <mat-tab-group mat-align-tabs="start">
      <mat-tab *ngFor="let colors_hue of globalService.colors_hues; let i = index">
        <ng-template mat-tab-label>
         test
        </ng-template>
        <app-hue>
        </app-hue>
      </mat-tab>
    </mat-tab-group>

test2