angular - MatDialog水平居中，宽度为100％，固定为maxWidth

我试图水平固定宽度的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选择器，但是没有得到想要的结果。

我想念什么？有什么方法可以配置Overlay的MatDialog吗？

最佳答案

在尝试将实质性内部类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