无法使角度材料居中使用模态窗口

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".除此之外,我试图通过调整config中的位置对象来手动居中.但它不接受类似的东西left: '50%-125px'.请问有什么好主意吗？

Answer 1

Angular Material 入门的第 4 步。

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

第四步

确保您之前已完成所有步骤。

角材料 - 入门

PS 这对我有帮助。

Answer 2

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

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

对于加载到对话框中的任何组件，必须在NgModule定义的entryComponents列表中包括组件类，以便Angular编译器知道为其创建ComponentFactory。

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

entryComponents: [DialogOverviewExampleDialog]

除非您进行了某些设置，否则您实际上不需要传递MatDialog的空位置配置。如果不能解决问题，这将是entryComponent解决方案之后的第二件事！

Answer 3

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

您可以在以下文档中阅读有关此内容的信息：https : //material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-

ts：

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule() {} 

希望能解决您的问题