损坏的嵌套选项卡

Question

我在使用嵌套选项卡时遇到问题。如果我在 md-tab 上定义 label 属性，一切看起来都很好，但是当我放置 <template md-tab-label>Nested Tab 1</template> 时，它会使父 md-tab-group 的第一个选项卡 "Nested Tab 1" 而不是 "Parent Tab 1".

如何解决这种尴尬的行为？还是就是这样？

HTML:

 <md-tab-group #parentTabs>
    <md-tab label="Parent Tab 1">
        First Tab
        <md-tab-group #childTabs>
            <md-tab>
                <ng-template md-tab-label><span (click)="tabClicked()">Nested Tab 1</span> <a (click)="close()">X</a></ng-template>
                Tab Content
            </md-tab>
            <md-tab label="Nested Tab 2">Nested Tab 2 Content</md-tab>
            <md-tab label="Nested Tab 3">Nested Tab 3 Content</md-tab>
        </md-tab-group>
    </md-tab>

    <md-tab label="Parent Tab 2">
        Second Tab
    </md-tab>
    <md-tab label="Parent Tab 3">
        Third Tab
    </md-tab>
</md-tab-group>

Plunkr demonstrating the issue

注意嵌套选项卡 1 在第一个父选项卡上的显示方式...

Answer 1

不确定根本原因，可能是 ContentChild 试图选择第一个找到的后代而不是 child。

这个假设使我想到了一个解决方法：将 <ng-template md-tab-label> 放入 parent 选项卡本身，这解决了问题。

<md-tab>
  <ng-template md-tab-label>Parent Tab 1</ng-template>
  First Tab

  <md-tab-group #childTabs>
    <md-tab>
      <ng-template md-tab-label><span (click)="tabClicked()">Nested Tab 1</span> <a (click)="close()">X</a></ng-template>
      Tab Content

    </md-tab>
    <md-tab label="Nested Tab 2">Nested Tab 2 Content</md-tab>
    <md-tab label="Nested Tab 3">Nested Tab 3 Content</md-tab>
  </md-tab-group>
</md-tab>

Plnkr：http://plnkr.co/edit/w0egLBU0aUQpPWbaeQtS?p=preview

Answer 2

我遇到了类似的问题，发现根据 material 文档 (https://material.io/guidelines/components/tabs.html#tabs-usage) 选项卡不应嵌套。

损坏的嵌套选项卡

Broken nested tabs

angular-material2

angular