Angular 6: mat-tab旁边的显示下拉菜单

Question

我试图显示一个选项卡旁边的下拉列表，用户应该能够点击下拉下拉选项。有没有人能帮个忙，提个主意，我该怎么做到这一点呢?我试着上传stackBlitz，不知何故没能做到。我会提供任何需要的信息。谢谢!！

<mat-tab-group>
<mat-tab
    label="PROFILE">
    <mat-select placeholder="PROFILE">
        <mat-option>address</mat-option>

    </mat-select>

    <mat-tab-body>
        <p> Name : ABC</p>
        <p>Age: 123</p>
    </mat-tab-body>
</mat-tab>

<mat-tab
    label="Dashboard">
    <mat-select placeholder="DB">
        <mat-option>1</mat-option>

    </mat-select>

    <mat-tab-body>
        <p> Name : Test</p>
        <p>Age: 123</p>
    </mat-tab-body>
</mat-tab>

​

Answer 1

您可以使用<nav mat-tab-nav-bar>来实现这一点。请参阅：Angular Tabs and Navigation

nav mat- tab - nav -bar与mat-tab类似唯一的区别是，您可以在选项卡头中放置自定义html，在选项卡点击上定义事件，并基于这些事件和您的逻辑，您可以通过路由器插座生成选项卡体，或者在您的nav mat- tab -nav-bar下显示和隐藏组件。

我已经为你创建了Stackblitz。Tabs With Select希望它能有所帮助。