在Angular中,可以使用Angular Material库来创建对话框。以下是一个示例,展示如何使用Angular Material对话框和传递参数:
ng add @angular/material
ng generate component dialog
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
Dialog
{{ data.message }}
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
data: { message: 'Hello, World!' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
在上面的代码示例中,openDialog方法将打开DialogComponent对话框,并将参数对象{ message: 'Hello, World!' }传递给对话框组件。对话框关闭时,可以通过订阅afterClosed方法来获取结果。
上一篇:Angular对话框不显示消息