水平居中 MatDialog，宽度为 100%，maxWidth 固定

Question

我正在尝试将固定宽度的 MatDialog 水平居中：

let dialog = this.dialog.open(EditVisitPopupComponent,
  { data: { visit: this.visit }, width: '100%', maxWidth: '500px' });

出于某种原因，添加 width 参数会将内联 justify-content: flex start 添加到父叠加层，而我希望它保留 justify-content: center.

我知道创建模态的方法是创建 Overlay 并将组件注入其中。但我不明白为什么我不能简单地使用 MatDialog.

我尝试过的：

let dialog = this.dialog.open(EditVisitPopupComponent,
      { data: { visit: this.visit }, position: this.overlay.position().global().centerVertically().centerHorizontally(), width: '100%', maxWidth: '500px' });

但是类型不匹配

我也尝试使用 backdropClass 和同级 CSS 选择器，但我没有得到想要的结果。

我错过了什么？有什么方法可以配置 MatDialog 的 Overlay?

Answer 1

在尝试使用 material 内部 class MatDialogContainer 用于我自己的目的后，我设法摆脱了 MatDialog 并且我能够创建我的自己的带有参数 Overlay 的对话框，我把 position: this.overlay.position().global().centerVertically().centerHorizontally().

但我得到了完全相同的结果！

然后我阅读了 GlobalPositionStrategy 源代码，我发现 Angular Material 贡献者没有考虑 width: 100%; max-width:...px; 用例，因为有一个丑陋的

if (config.width === '100%') {
  parentStyles.justifyContent = 'flex-start';
}

然后我回滚到 MatDialog 解决方案并输入 width: 'calc(100%)'，它虽然丑陋，但效果很好，最终得到了预期的结果。

更新 v9.1.0 (01-2020)

这个错误终于被修复了，添加了一些逻辑（基于width和maxWidth）来确定align-items和justify-content应该包含什么。有关提交的更多详细信息：https://github.com/angular/components/commit/9f2c93725e973e2c76e3308a72c5bd14f5ec483c

水平居中 MatDialog，宽度为 100%，maxWidth 固定

Horizontally center MatDialog with 100% width and fixed maxWidth

javascript

angular-material2

angular

angular6

angular-cdk