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>實現此目的。 另請： 角度制表符和導航

nav mat-tab-nav-bar與mat-tab相似，唯一的區別是，您可以在標簽頁眉中放置自定義html，在標簽頁單擊中定義事件，並根據這些事件和您的邏輯生成標簽頁主體通過路由器插座，或在nav mat-tab-nav-bar下面顯示和隱藏組件。

我為您創建了一個Stackblitz。 “選擇希望” 選項卡會有所幫助。