Angular Flex：使用带有网格选项的 fxLayoutGap 时，mat-dialog-content 的高度不正确答案

【问题标题】：Angular Flex: The height of mat-dialog-content is not correct when using fxLayoutGap with grid optionAngular Flex：使用带有网格选项的 fxLayoutGap 时，mat-dialog-content 的高度不正确
【发布时间】：2020-06-15 21:47:51
【问题描述】：

当我使用 fxLayoutGap 和 grid 选项创建内容要显示的模式窗口时，对话框内容区域的高度计算不正确。不是放大对话框，而是发生溢出。

Stackblitz：https://stackblitz.com/edit/angular-material-jror5h

模态组件代码：

  <mat-dialog-content class="mat-typography">
    <div fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px grid">
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 1</mat-label>
          <input matInput placeholder="FormControl 1" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="66.7">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 2</mat-label>
          <input matInput placeholder="FormControl 2" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 3</mat-label>
          <mat-select>
            <mat-option [value]="true">yes</mat-option>
            <mat-option [value]="false">no</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline" style="width: 100%">
          <mat-label>FormControl 5</mat-label>
          <input matInput placeholder="FormControl 5" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 6</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>

渲染的模态组件： 不给 mat-dialog-content 指定固定高度怎么解决问题？

【问题讨论】：

您找到解决方案了吗？
很遗憾没有...我指定了一个固定高度作为解决方法。

标签： angular angular-material angular-flex-layout

【解决方案1】：

您可以在从对话框配置打开之前设置模态的高度：

openModal() {
    this.dialog.open(ModalComponent, {
      height: '400px'
    });
  }

您在 form 中包含 mat-dialog-content，这是错误的。

mat-dialog-content 是您的模态内容的父级，mat-dialog-actions 可以用作此内容的页脚

【讨论】：

不幸的是，这并不能解决溢出问题。我希望对话框在出现内容滚动条之前动态增长到最大可能高度 65vh。
如果你放的是固定宽度，提问者不会使用fxLayout

【解决方案2】：

使用 fxFlexFill 指令获得正确的高度

<div fxLayout="row wrap" fxFlexFill fxLayoutAlign="start start" fxLayoutGap="20px grid">

【讨论】：

不幸的是，这并不能解决溢出问题。用 StackBlitz 试试吧:)。

【解决方案3】：

您可以将encapsulation: ViewEncapsulation.None 添加到您的component.ts 文件中，然后在component.css 文件中添加 .mat-dialog-content { overflow: hidden; }

我注意到您使用的是::ng-deep，即deprecated。

This is the forked stackblitz showing it works.

【讨论】：