Question

使用嵌套标签时出现问题。如果我在label上定义md-tab属性，一切看起来都不错，但是当我放置<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>

注意嵌套标签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

Answer 2

我遇到了类似的问题，发现根据材料文档（https://material.io/guidelines/components/tabs.html#tabs-usage）标签不应该嵌套。

破碎的嵌套标签

2 个答案: