隐藏特定于组件的材质mat-tab-body-wrapper

Question

我正在使用Angular Material的选项卡组件，在这里我需要具有多个选项卡并隐藏所有选项卡的内容。我尝试使用以下CSS对其进行修改：

.mat-tab-body-wrapper {   显示：无 }

这对我有用，但与此同时，它也隐藏了所有其他组件中其他选项卡的内容，而不是不特定于我的组件（全局应用，尽管它应为组件专用）。我还尝试将viewEncapsulation设置为Native，这会干扰其他UI库使用的CSS。有没有一种方法可以向mat-tab-body-wrapper添加id属性，以便捕获样式中的特定组件。我不想走jQuery的方式。另外，我的标签页使用* ngFor循环标签页列表，而不是模板中的单个标签页。

Answer 1

您可以通过将一个类应用于主要的mat-tab组件来限制隐藏标签的类的范围：

<mat-tab-group class="hides-tabs">
    ...
</mat-tab-group>

mat-tab-group.hides-tabs .mat-tab-body-wrapper {
    display: none
}

或者，如果您的标签位于自定义组件中，则可以将组件的选择器用作CSS选择器的一部分：

<my-component class="hides-tabs">
    <!-- component template includes mat-tab-group -->
    ... 
</my-component>

my-component.hides-tabs .mat-tab-body-wrapper {
    display: none
}