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

Question

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

• Tab 1 Tab - component
• Tab 2 tab2-Component
• Tab 3 tab3-Component
• 表4 tab4-Component

所有选项卡只在一个页面中显示。

Answer 1

我猜你正在寻找一个容器组件，它实际上持有其他组件，但组件将打开，以单击各自的选项卡。所以我认为你可以这样组织模板:

tab-container-component.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>