从 Angular 6 组件动态设置 mat-tab 属性的样式

Question

我有一个带有两个选项卡的 mat-tab-group - 基本搜索和高级搜索。由于高级搜索有更多的表单字段，我想动态修改 max-height 属性的 .mat-tab-body-content class.

<mat-tab-group (selectedTabChange)="tabChanged($event)">
 <mat-tab label="Basic">
  <ng-template matTabContent>
   

  <!-- .. -->

  </ng-template>
 </mat-tab>
 <mat-tab label="Advanced">
  <div>
   <ng-template matTabContent #advSearchTab>
    <form [formGroup]="searchForm" (ngSubmit)="search()"  >
    
     <!-- ... -->
     
    </form>
   </ng-template>
  </div>
 </mat-tab>
</mat-tab-group>

并且当它呈现给 DOM 时，Angular 注入此内容 class:

  <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;">

我有一些 scss，我想在我的组件 ts 代码中动态更改。

这是我目前为 max-height 和 overflow-y 值设置的 scss：

$advanced-search-panel-max-height: 800px;
$advanced-search-panel-overflow-y: auto;

:host ::ng-deep .mat-tab-body-content{  
  max-height: $advanced-search-panel-max-height;
  padding:5px;
  overflow-y: $advanced-search-panel-overflow-y;
}

在笔记本电脑上，max-height 和 auto 不显示滚动条（即您通常会在底部看到 Submit/Clear 按钮），这导致内容变为隐藏在底部。因此，我想动态修改这两种样式。

我可以以某种方式在我的组件代码中分配那些 scss 变量，还是我必须使用 ElementRef 类型？

Answer 1

默认情况下，mat-tab-body-content class 已经将溢出设置为自动，因此您不需要设置它。正常使用下，如果想让tab里面出现垂直滚动条，那么只需要限制mat-tab-group的高度即可。

从 Angular 6 组件动态设置 mat-tab 属性的样式

Dynamically style a mat-tab property from an Angular 6 component

sass

angular

angular-material-6

从 Angular 6 组件动态设置 mat-tab 属性 的样式

Dynamically style a mat-tab property from an Angular 6 component

sass

angular

angular-material-6

从 Angular 6 组件动态设置 mat-tab 属性的样式