如何隐藏带有嵌套选项卡组的 mat-tab-header，隐藏外部 mat-tab-group 而不隐藏内部答案

【问题标题】：How to hide mat-tab-header with nested tab groups, hide for outer mat-tab-group without hiding for inner如何隐藏带有嵌套选项卡组的 mat-tab-header，隐藏外部 mat-tab-group 而不隐藏内部
【发布时间】：2019-01-24 22:35:05
【问题描述】：

我基本上有 html

<mat-tab-group>
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

如何使用 css（或任何方法）隐藏外部选项卡组 mat-tab-header 元素，但不影响内部选项卡标题？

【问题讨论】：

标签： css angular sass angular-material

【解决方案1】：

简单的替代解决方案：

将以下内容添加到您的组件 css 文件中：

::ng-deep .mat-tab-header {
display: none!important;
}

【讨论】：

【解决方案2】：

我强烈建议您使用这个自定义指令而不是使用 css。

import { Directive, ElementRef, OnInit } from "@angular/core";

@Directive({
  selector: "[header-less-tabs]",
})
export class HeaderLessTabsDirective implements OnInit {
  constructor(private eleRef: ElementRef) {}

  ngOnInit(): void {
    this.eleRef.nativeElement.children[0].style.display = "none";
  }
}

它非常简单且可重复使用。用法示例：

<mat-tab-group header-less-tabs>
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

【讨论】：

除了可重用性之外，您能解释一下为什么建议使用指令而不是css吗？
其他方法之一是使用 ng-deep 或将视图封装设置为无。但它也会影响其他选项卡，并且指令不会有这个问题。除此之外，可重用性对我来说是一个重要因素

【解决方案3】：

想通了，只需要选择直接孩子

<mat-tab-group class="invisible-tabs">
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

.invisible-tabs {
  > .mat-tab-header {
    display: none;
  }
}

【讨论】：