我已经使用角度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;
}
}