带有组件的“可滚动”垫子对话框答案

【问题标题】："Scrollable" mat dialog with component带有组件的“可滚动”垫子对话框
【发布时间】：2019-02-27 14:18:29
【问题描述】：

我发现关于滚动对话框的所有内容都是关于覆盖的，但它是描述对话框外的行为，但我需要滚动它里面不在垫内容中的内容，因为它是一个完整的组件。

打开我正在使用的对话框：

const dialogRef = this.dialog.open(CadatroPessoaComponent, 对话框配置）

对话框配置如下：

dialogConfig.width = '90%';

【问题讨论】：

【解决方案1】：

尝试将dialogConfig 的height 设置为所需的对话框高度。

它对我有用：

const dialogRef = this.dialog.open(CadastroPessoaComponent, {
   height: '300px'
}

如果组件内容的高度高于 300 像素，它将添加溢出。

有关可用对话框配置的完整列表，请查看MatDialog API。

【讨论】：

【解决方案2】：

如果您不知道需要设置多少高度。你可以：

  openDialog() {
    this.dialog.open(myComponent, {
      height: '100%'
    })
  }

如果您想在对话框和页面边框之间进行一些填充。您应该将高度设置为低于 100%。

  openDialog() {
    this.dialog.open(myComponent, {
      height: '90%'
    })
  }

【讨论】：