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

发布时间：2020-12-17 06:49:54 所属栏目：安全来源：网络整理

导读：这很疯狂但是以下代码： import { Component,Inject } from '@angular/core';import { MatDialog,MatDialogRef,MatDialogConfig,MAT_DIALOG_DATA } from '@angular/material';@Component({ selector: 'decline',templateUrl: './decline.component.html',sty

这很疯狂但是以下代码：

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() {}

我希望能解决你的问题

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!