如何在Angular中实现带自定义内容与回调的可复用对话框？

需求说明 #

需要创建可复用的Angular对话框：

• 基础款：仅包含标题、消息、确认/取消按钮
• 扩展款：在基础款基础上添加下拉选择框
• 每个对话框的确认、取消按钮点击回调需支持自定义

现有代码已实现标题、消息、按钮文本的动态化，需进一步扩展功能。

解决方案步骤 #

1. 扩展DialogData接口 #

更新dialog-data.ts，添加回调函数、下拉框相关配置字段：

export interface DialogData {
  title: string;
  message: string;
  confirmText: string;
  cancelText: string;
  // 下拉框配置
  showDropdown?: boolean;
  dropdownOptions?: { label: string; value: any }[];
  selectedDropdownValue?: any;
  // 自定义回调
  onConfirm?: () => void;
  onCancel?: () => void;
}

2. 修改对话框组件模板 #

更新dialog.component.html，根据配置动态渲染下拉框，并绑定按钮点击事件：

<h1 mat-dialog-title>{{data?.title}}</h1>
<div mat-dialog-content>
  {{data?.message}}
  <!-- 动态渲染下拉框 -->
  <mat-form-field *ngIf="data?.showDropdown" style="margin-top: 16px;">
    <mat-label>选择选项</mat-label>
    <mat-select [(value)]="data.selectedDropdownValue">
      <mat-option *ngFor="let option of data.dropdownOptions" [value]="option.value">
        {{option.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-raised-button (click)="handleConfirm()">{{data?.confirmText}}</button>
  <button mat-raised-button (click)="handleCancel()" cdkFocusInitial>{{data?.cancelText}}</button>
</div>

3. 修改对话框组件逻辑 #

更新dialog.component.ts，实现按钮点击的回调处理：

import { DialogData } from './../../models/dialog-data';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss'],
})
export class DialogComponent implements OnInit {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
    private dialogRef: MatDialogRef<DialogComponent>
  ) {}

  ngOnInit(): void {}

  handleConfirm(): void {
    // 执行确认回调（如果存在）
    this.data.onConfirm?.();
    // 关闭对话框并返回选中值（可选）
    this.dialogRef.close(this.data.selectedDropdownValue);
  }

  handleCancel(): void {
    // 执行取消回调（如果存在）
    this.data.onCancel?.();
    // 关闭对话框
    this.dialogRef.close();
  }
}

4. 调整对话框服务（可选） #

dialog.service.ts无需大幅修改，保持原有逻辑即可，现在它会自动支持新的DialogData字段：

import { Observable } from 'rxjs';
import { DialogData } from './../../models/dialog-data';
import { MatDialog } from '@angular/material/dialog';
import { Injectable } from '@angular/core';
import { DialogComponent } from './dialog.component';

@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(private dialog: MatDialog) { }

  openDialog(data: DialogData): Observable<any> {
    return this.dialog.open(DialogComponent, {
      data,
      width: '400px',
      disableClose: true
    }).afterClosed();
  }
}

5. 示例用法 #

基础款对话框调用

openBasicDialog() {
  this.dialogService.openDialog({
    title: '确认操作',
    message: '确定要执行此操作吗？',
    confirmText: '确定',
    cancelText: '取消',
    onConfirm: () => {
      console.log('用户点击了确认，执行对应逻辑');
      // 这里可以写具体的业务代码，比如提交表单、删除数据等
    },
    onCancel: () => {
      console.log('用户点击了取消，执行对应逻辑');
    }
  }).subscribe(result => {
    console.log('对话框关闭，返回结果:', result);
  });
}

带下拉框的对话框调用

openDropdownDialog() {
  this.dialogService.openDialog({
    title: '选择分类',
    message: '请选择一个分类后确认',
    confirmText: '确认选择',
    cancelText: '取消',
    showDropdown: true,
    dropdownOptions: [
      { label: '分类A', value: 'categoryA' },
      { label: '分类B', value: 'categoryB' },
      { label: '分类C', value: 'categoryC' }
    ],
    selectedDropdownValue: 'categoryA', // 默认选中值
    onConfirm: () => {
      console.log('用户确认选择，执行对应逻辑');
    }
  }).subscribe(selectedValue => {
    if (selectedValue) {
      console.log('用户选中的分类:', selectedValue);
      // 处理选中值的业务逻辑
    }
  });
}

内容的提问来源于stack exchange，提问作者coder