Angular-显示自定义组件而不是MatDialog组件
- 在你的组件中创建自定义对话框组件，例如：
// custom-dialog.component.ts import { Component } from '@angular/core';
@Component({
selector: 'app-custom-dialog',
template: Hello, world! ,
styles: [
Custom Dialog
.dialog { border: 1px solid black; padding: 10px; background-color: white; width: 300px; height: 200px; } ,
],
})
export class CustomDialogComponent {
close() {
// handle closing the dialog
}
}
- 在你的组件中导入自定义对话框组件，并在需要打开对话框的地方创建一个实例。例如：
// some.component.ts import { Component } from '@angular/core'; import { CustomDialogComponent } from './custom-dialog.component';
@Component({
selector: 'app-some',
template: ,
})
export class SomeComponent {
openDialog() {
const dialogRef = new CustomDialogComponent();
// handle opening the dialog
}
}
- 在CustomDialogComponent中，你可以添加任何需要的逻辑来处理真正的对话框关闭事件。另外，StyleSheet控制显示。