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

您必须通过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() {}

我希望能解决你的问题

Answer 2

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

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

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

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

entryComponents: [DialogOverviewExampleDialog]

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

Answer 3

我遇到了相同类型的问题，我的模式显示在页面的左下角，并且不接受我传递给dialog.open函数的高度/宽度等，也没有显示任何背景等。

我刚刚添加

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

转到我的angular-cli.json文件的样式行，现在可以正常使用了。

Answer 4

Angular Material的第4步入门。

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

Step 4

请确保您已完成所有步骤。

Angular Material - Getting started

P.S。对我有帮助。

Answer 5

如下定义您的配置：

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%);
 }

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

5 个答案: