angular - 无法将模态窗口从 Angular Material 居中

Question

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

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/material/prebuilt-themes/indigo-pink.css"。除此之外，我尝试通过调整 位置手动将其居中配置中的对象。但是它不接受类似left: '50%-125px' 的内容。请问有什么好主意吗？

Answer 1

您缺少 entryComponent 的配置。我遇到了同样的问题。在 AppModule 中将组件名称添加到 entryComponent 解决了我的问题。

Because MatDialog instantiates components at run-time, the Angular compiler needs extra information to create the necessary ComponentFactory for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of entryComponents in your NgModule definition so that the Angular compiler knows to create the ComponentFactory for it

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

entryComponents: [DialogOverviewExampleDialog]

而且你真的不需要为 MatDialog 传递空位置配置，除非你正在设置一些东西。这将是在 entryComponent 解决方案之后尝试的第二件事，如果它不能解决问题的话!