使角度MatDialog居中

时间:2018-05-15 15:55:41

标签: javascript css angular

我已经使用角度MatDialog实现了一个模态对话框来代替alert()函数。 一切正常,但对话框的定位。我无法将对话框放在页面的中心。对话框始终显示在页面的左下角。

html文件如下所示:

<h2>Oups! Something went wrong.</h2>

<p>{{error}}</p>

<button class="btn-outline-primary" mat-dialog-close>OK</button>

这是打开对话框的功能

private openDialog(error: string) {
const dialogConfig = new MatDialogConfig();

dialogConfig.data = {
  error: 'This is a test'
}
dialogConfig.disableClose = false;
dialogConfig.hasBackdrop = false;
dialogConfig.autoFocus = false;
dialogConfig.width = '600px';
dialogConfig.height = '200px';

this.dialog.open(ErrorDialogComponent, dialogConfig);
}

组件类:

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from "@angular/material";

@Component({
  selector: 'app-error-dialog',
  templateUrl: './error-dialog.component.html',
  styleUrls: ['./error-dialog.component.scss']
})
export class ErrorDialogComponent  {
 error: string;

 constructor(@Inject(MAT_DIALOG_DATA) data) {
  this.error = data.error;
 }
}

这是一个截图: enter image description here

1 个答案:

答案 0 :(得分:0)

deep styling

该功能现在适用于09/2019。尝试注入它更容易。