要在Angular对话框中显示默认视图,可以按照以下步骤操作:
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'dialog-component',
template: `
对话框标题
对话框内容
`,
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent {
constructor(public dialogRef: MatDialogRef) { }
}
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
@Injectable()
export class DialogService {
constructor(private dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '400px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('对话框已关闭');
});
}
}
openDialog()
方法来打开对话框:import { Component } from '@angular/core';
import { DialogService } from './dialog.service';
@Component({
selector: 'app-component',
template: `
`
})
export class AppComponent {
constructor(private dialogService: DialogService) { }
openDialog(): void {
this.dialogService.openDialog();
}
}
确保在app.module.ts
中正确导入和配置MatDialogModule
和DialogService
,然后就可以在应用中打开对话框了。