将角度材质的纹理区域设置为组件的50%

本教程将介绍将角度材质的纹理区域设置为组件的50%的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

将角度材质的纹理区域设置为组件的50% 教程 第1张

问题描述

我正在创建一个角度为6的应用程序(我计划将其迁移到NG7),并且在其中一个组件中需要添加两个元素,ng材质的textarea和我的定制组件。每一个都应该占可用高度的50%。我对文本区域有一个问题,因为生成的mat-form-field-wrapper只占用它所需的空间,并且我无法在该元素中实现我的目标(我不想使用任何::Ng-Deep解决方案,因为不推荐这样做)

以下是我到目前为止所做的工作(当然是示例):

<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
  <mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
 <textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
  </mat-form-field>
</form>

<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

推荐答案

您需要覆盖全局样式表中的样式,以替代使用Deep。由于表单域元素的布局方式和变量填充等原因,我不确定您是否能在所有条件下完美地工作,但这里是一个起点:

<form [formGroup]="myGroup" style="display: flex; flex-direction: column; height: 50%;">
  <mat-form-field class="stretch-height">
 <textarea matInput formControlName="myControl"></textarea>
  </mat-form-field>
</form>

<my-custom-component style="height: 50%" *ngIf="somevariable" [variable]="somevariable"></my-custom-component>

全局css

.mat-form-field.stretch-height,
.mat-form-field.stretch-height .mat-form-field-flex,
.mat-form-field.stretch-height textarea {
  height: 100%;
}
.mat-form-field.stretch-height .mat-form-field-wrapper {
  height: calc(100% - 1.34375em);
}
.mat-form-field.stretch-height .mat-form-field-infix {
  height: calc(100% - 1.34375em - 2px);
}

父容器的高度应为100%或您希望的高度,这一点很重要。

这是StackBlitz上的演示。

好了关于将角度材质的纹理区域设置为组件的50%的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。