Angular 材质对话框 - 将类型传递到对话框组件中

当你使用Angular构建应用程序时，利用对话框组件是一种常见的方式来与用户进行交互。而在许多情况下，我们需要将特定类型的数据传递到对话框组件中，以便根据这些数据来自定义对话框的行为和外观。在Angular中，使用材质对话框可以轻松地实现这一点。

typescript
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private dialog: MatDialog) {}
  openDialogWithType(type: string): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      data: {
        dialogType: type
      }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

typescript
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
  ngOnInit() {
    console.log(this.data.dialogType); // Accessing the passed dialogType
    // Implement logic based on the received type
  }
}