在MatDialog服务中,使用MatDialogConfig来设置对话框的位置,而不是使用默认的位置。例如,可以使用以下代码将对话框设置为居中显示在屏幕上方:
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: '',
})
export class DialogExampleComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
//设置对话框的位置
dialogConfig.position = {
top: '10px',
left: '20px'
};
this.dialog.open(DialogExampleDialogComponent, dialogConfig);
}
}
@Component({
selector: 'app-dialog-example-dialog',
template: `
Dialog Title
Dialog content goes here
`,
})
export class DialogExampleDialogComponent {
constructor() {}
onNoClick(): void {
this.dialogRef.close();
}
}
在上述代码中,我们使用dialogConfig.position
属性来设置对话框的位置。使用top
和left
属性来指定距离屏幕顶部和左侧的距离。可以根据需要调整这些值以实现所需的位置。