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

这很疯狂但是以下代码:

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中的位置对象来手动居中.但它不接受某些东西就像左:’50%-125px’.有什么好主意吗?

解决方法

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

我希望能解决你的问题

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...