在一个页面中使用多个选项卡控件每个选项卡控件都有一个组件答案

【问题标题】：In one page Using Multiple tab controls each tab control have one Component在一个页面中使用多个选项卡控件每个选项卡控件都有一个组件
【发布时间】：2021-07-30 13:23:00
【问题描述】：

在使用多个选项卡控件的页面中，每个选项卡控件都有一个组件。
单击选项卡时，它仅打开该类型的组件。当单击另一个选项卡时，它只打开相关组件

选项卡 1 tab1-组件
选项卡 2 tab2-组件
选项卡 3 tab3-组件
选项卡 4 tab4-组件

所有选项卡仅显示在单个页面中。

【问题讨论】：

标签： angular

【解决方案1】：

我猜你正在寻找一个容器组件，它实际上包含其他组件，但组件将打开以单击相应的选项卡。所以我认为你可以按如下方式组织模板：

标签容器组件.html：

<mat-tab-group mat-align-tabs="start">
    <mat-tab label="Tab 1">
        <app-tab1-component></app-tab1-component>
    </mat-tab>
    <mat-tab label="Tab 2">
        <app-tab2-component></app-tab2-component>
    </mat-tab>
    <mat-tab label="Tab 3">
        <app-tab3-component></app-tab3-component>
    </mat-tab>
    <mat-tab label="Tab 4">
        <app-tab4-component></app-tab4-component>
    </mat-tab>
</mat-tab-group>

tab1-component.html：

<mat-card>
  <mat-card-content>
    Tab1 Component works!
  </mat-card-content>
</mat-card>

tab2-component.html：

<mat-card>
  <mat-card-content>
    Tab2 Component works!
  </mat-card-content>
</mat-card>

tab3-component.html：

<mat-card>
  <mat-card-content>
    Tab3 Component works!
  </mat-card-content>
</mat-card>

tab4-component.html：

<mat-card>
  <mat-card-content>
    Tab4 Component works!
  </mat-card-content>
</mat-card>

【讨论】：