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

【问题标题】：Dynamically style a mat-tab property from an Angular 6 component从 Angular 6 组件动态设置 mat-tab 属性的样式
【发布时间】：2018-10-22 22:23:35
【问题描述】：

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

<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 会注入这个内容类：

  <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 不显示滚动条（即您通常会在底部看到“提交/清除”按钮），这会导致内容隐藏在底部。出于这个原因，我想动态修改这两种样式。

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

【问题讨论】：

为什么不直接使用<mat-tab-group [dynamicHeight]="true">？
@G.Tranter - 我刚刚又试了一次，但我猜是父组件导致了这种行为。即使将overflow-y: scroll; 放在`.mat-tab-body-content` 选择器上也会显示一个白条，但它不会滚动。
如果您可以在 StackBlitz 上分享一个完整的工作示例，这可能会有很大帮助。您共享的代码不正确 - SASS var 名称在定义和用法之间不匹配 - 因此很难知道这是实际问题还是仅仅是复制错误。
我的错误 - sass 变量以 $advanced-search-panel 开头。
默认情况下，mat-tab-body-content 类已经将溢出设置为自动，所以我真的不明白你为什么认为你需要设置它。正常使用下，如果想让tab里面出现垂直滚动条，那么只需要限制mat-tab-group的高度即可。

标签： angular sass angular-material-6

【解决方案1】：

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

【讨论】：