Angular 无法从角度材质将模态窗口居中

这很疯狂，但是下面的代码：

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'decline',
    templateUrl: './decline.component.html',
    styleUrls: ['../../../styles/main.css']
})

export class DeclineComponent {

    animal: string;
    name: string;
    config: MatDialogConfig = {
        disableClose: false,
        hasBackdrop: true,
        backdropClass: '',
        width: '250px',
        height: '',
        position: {
            top: '',
            bottom: '',
            left: '',
            right: ''
        }
    };
    constructor(public dialog: MatDialog) { }

    openDialog(): void {
        let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
    }

}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: `
        This is nothing
          `
})
export class DialogOverviewExampleDialog {

    constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) { }

}

从'@angular/core'导入{Component，Inject}；
从“@angular/material”导入{MatDialog，MatDialogRef，MatDialogConfig，MAT_DIALOG_DATA}；
@组成部分({
选择器：“拒绝”，
templateUrl:“./Decept.component.html”，
样式URL:['../../../styles/main.css']
})
导出类DeclineComponent{
动物：细绳；
名称：字符串；
配置：MatDialogConfig={
disableClose:false，
哈斯：是的，
backdropClass:“”，
宽度：'250px'，
高度：''，
职位：{
顶部：“”，
底部：“”，
左：''，
对：“”
}
};
构造函数（公共对话框：MatDialog）{}
openDialog（）：void{
让dialogRef=this.dialog.open（DialogOverviewExampleDialog，this.config）；
}
}
@组成部分({
选择器：“对话框概述示例对话框”，
模板：`
这没什么
`
})
导出类对话框概述示例对话框{
建造师(
公共dialogRef:MatDialogRef）{}
}

不居中（水平和垂直）模态窗口，而在我迄今为止看到的所有示例中，它都居中。我找不到问题。。。

---

我不得不说我正在使用

“~@angular/material/prebuild themes/indigo-pink.css“

。除此之外，我还尝试通过在配置内部调整位置对象来手动将其居中。但是，它不接受类似于

left:'50%-125px'

的内容。有什么好主意吗？

您必须通过app.module.ts文件中的entryComponents配置对话框内容

您可以在文档中了解这一点：

ts:

---

我希望这能解决您的问题

我遇到了相同类型的问题，我的模式显示在页面的左下角，不会尊重我传递到dialog.open函数中的高度/宽度等，也不会显示任何背景等

我刚才补充说

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

---

到我的

angular cli.json文件的样式行，它现在工作得非常完美。
开始使用angular Material的第4步。

// Add this line to style.css of your app.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


确保您在之前完成了所有步骤


另外，这对我很有帮助。
您缺少entryComponent的配置。我也面临同样的问题。将组件名称添加到AppModule中的entryComponent解决了我的问题

由于MatDialog在运行时实例化组件，因此
编译器需要额外的信息来创建必要的
对话框内容组件的组件工厂

对于加载到对话框中的任何组件，必须包括
NgModule中entryComponents列表中的component类
定义，以便角度编译器知道如何创建
it组件工厂

将下面的代码行添加到app.module.ts文件中

entryComponents: [DialogOverviewExampleDialog]

而且，除非您正在设置某些内容，否则实际上不需要为MatDialog传递空位置配置。这将是继entryComponent解决方案之后的第二个尝试，如果它不能解决问题
 按如下方式定义配置：

config: MatDialogConfig = {
    disableClose: false,
    hasBackdrop: true,
    backdropClass: '',
    width: '250px',
    height: '',
    position: {
        top: '50vh',
        left: '50vw'
    },
    panelClass:'makeItMiddle', //Class Name that can be defined in styles.css as follows:
};

在styles.css文件中：

.makeItMiddle{
     transform: translate(-50%, -50%);
 }

我们需要研究复制品来发现并解决问题。您可以设置最小的示例吗？您的对话框是什么样子的？
AppModule
不需要大括号（又名。
（）
）谢谢。我想补充的是，它不需要是app.module，只需要是容纳您使用对话框的模块（例如
homepage.module.ts
）
.makeItMiddle{
     transform: translate(-50%, -50%);
 }