Angular MatDialog 附加到 HTML 而不是显示为弹出窗口答案

【问题标题】：Angular MatDialog appends to HTML instead of showing as a popupAngular MatDialog 附加到 HTML 而不是显示为弹出窗口
【发布时间】：2019-03-07 05:43:33
【问题描述】：

我正在关注 Youtube(https://www.youtube.com/watch?v=xJJ_NDqvuCk) 上的 Angular MatDialog 教程，并按照指示进行了完全相同的操作。但是，弹出窗口似乎无法正常工作。如何使弹出窗口显示在屏幕中间而不是附加到 HTML 的底部

【问题讨论】：

我的对话框只是一直附加到 HTML 的底部。
添加代码而不是图像

标签： angular dialog modal-dialog angular-material

【解决方案1】：

您是否导入了主题？

将以下行添加到styles.css/styles.scss/您的主 CSS 文件：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

【讨论】：

【解决方案2】：

在我的例子中，这个问题通过在 angular.json 中添加主题来解决

{
 "project": {
  ...
  "architect": {
   "build": {
    ...
    "options": {
    "styles": [
     "src/styles.scss",
     "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     ...
    ]
   }
 }
}

【讨论】：