Angular CDK 对话框未呈现为静态/固定/绝对布局

Question

使用 Angular CDK 14.2.1 使用

@angular/cdk/dialog

中的对话框模块时，对话框会打开，但不会作为 UI 顶部的本机模式，而是显示在 html 流之后，因此它会在下游呈现其余组件。

Angular 版本是 14.0.0

这是TS

constructor(private dialog: Dialog) { }

  opendialog() {
    this.dialog.open(DialogComponent, { width: '100%', height: '100%', panelClass: 'dialog' });
  }

这是 HTML：

<button (click)="opendialog()">open dialog</button>

CDK 和 Angular Material 都无法正确渲染它。

更准确地说，这是期望的行为： https://material.angular.io/cdk/dialog/examples

这就是我的行为

非常感谢

Answer 1

我也遇到了同样的问题，并认为这与对话框模块附带的覆盖CSS有关。我的预感在线示例之所以有效，是因为他们已经在项目中安装了 Material Theme，并且所有覆盖 css 都包含在其中。

解决方案是尝试导入预构建的覆盖 CSS，如覆盖 CDK 文档中所示。

参考： https://material.angular.io/cdk/overlay/overview

在我的 Angular 案例中，我将其导入到 styles.scss 中，现在它可以工作了。干杯！

@import '@angular/cdk/overlay-prebuilt.css';