嵌套选项卡破损

Question

我使用嵌套选项卡时出现问题。如果我在md-tab上定义label属性，一切看起来都不错，但是当我放入<template md-tab-label>Nested Tab 1</template>时，它会使父项md-tab-group的第一个选项卡为“嵌套选项卡1”而不是“父级选项卡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试图挑选先找到后代而不是孩子。

该假设使我找到了一个解决方法：将<ng-template md-tab-label>放入父标签本身，这解决了问题。

<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