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

Question

我有一个mat-tab-group，带有两个标签-基本搜索和高级搜索。由于高级搜索有很多表单字段，因此我想动态地修改max-height类的.mat-tab-body-content属性。

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

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

这是我目前为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 var，还是必须使用ElementRef类型？

Answer 1

默认情况下，mat-tab-body-content类已将溢出设置为auto，因此您无需进行设置。在正常使用情况下，如果希望垂直滚动条出现在选项卡内，则只需要限制mat-tab-group的高度即可。