在Angular中,可以使用MatDialog服务来创建对话框。要更改对话框的大小,可以使用CSS样式来覆盖默认的宽度和高度。 以下是一个示例,展示如何创建一个自定义大小的对话框:
构建HTML文件:
DialogOverviewExampleDialog 组件:
import {Component} from '@angular/core'; import {MatDialog, MatDialogRef} from '@angular/material/dialog';
@Component({ selector: 'dialog-overview-example', templateUrl: 'dialog-overview-example.html', }) export class DialogOverviewExample {
constructor(public dialog: MatDialog) {}
openDialog(): void { const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '250px', height: '250px' });
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
@Component({ selector: 'dialog-overview-example-dialog', templateUrl: 'dialog-overview-example-dialog.html', }) export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MatDialogRef
onNoClick(): void { this.dialogRef.close(); }
}
在上面的代码中,我们使用width和height属性来指定对话框的大小。这会替换默认的宽度和高度,从而创建一个大小为250 x 250px的对话框。这里只是一个示例,你可以使用自己喜欢的任何值来设置对话框的大小。