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

Question

我基本上有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 元素，但不影响内部选项卡标题？

Answer 1

我强烈建议您使用此自定义指令而不是使用 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>

Answer 2

弄清楚了，只需选择直接子项

<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;
  }
}

Answer 3

简单的替代解决方案：

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

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

Answer 4

使用 ng:deep 的另一种替代解决方案

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

    <!-- in css file -->
    .invisible-tabs {
          ::ng-deep .mat-tab-header {
            display: none !important;
          }
        }

Answer 5

在最新版本的 Angular 上，您可以使用

 <mat-tab-group class=" header-less-tabs">
<!-- First Tab -->
<mat-tab>
 <p>Tab1 content</p>
</mat-tab>
<!-- Second Tab  -->
<mat-tab>
 <p>Tab2 content</p>
</mat-tab>
</<mat-tab-group>

CSS

.header-less-tabs.mat-mdc-tab-group .mat-mdc-tab-header {
   display: none !important;
}

TS文件

 @Component({
selector: 'app-tab-options',
templateUrl: './tab-options.component.html',
styleUrls: ['./registration-options.component.css'],
imports: [
  MatTabsModule,

], 独立：真实， 封装：ViewEncapsulation.None })