Angular+PrimeNG自定义确认对话框：将配置项封装至单一对象

没问题，我来帮你把这三个变量整合到一个configuration对象里，让你的确认对话框组件更整洁易用。下面是完整的实现方案：

首先先完善你的Configuration模型文件，确保它包含需要的三个核心属性：

// src/app/model/confirmModal.model.ts
export interface Configuration {
  confirmButtonLabel: string;
  messageText: string;
  acceptFunction: () => void; // 可根据需求调整函数参数/返回值类型
}

接下来是组件的完整代码，我们把原来的三个独立变量替换成单个@Input()接收的配置对象：

// src/app/components/myConfirmDialog/myConfirmDialog.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Configuration } from '../../model/confirmModal.model';

@Component({
  selector: 'app-my-confirm-dialog',
  templateUrl: './myConfirmDialog.component.html'
})
export class MyConfirmDialogComponent implements OnInit {
  // 用单个configuration对象统一接收所有配置参数
  @Input() configuration!: Configuration;

  constructor() { }

  ngOnInit(): void {
    // 可选：初始化时做配置校验，避免传入不完整参数导致报错
    if (!this.configuration?.messageText || !this.configuration?.confirmButtonLabel) {
      console.warn('确认对话框缺少必要配置参数');
    }
  }

  // 处理确认按钮点击，调用配置中的回调函数
  handleConfirm(): void {
    if (this.configuration?.acceptFunction) {
      this.configuration.acceptFunction();
    }
  }
}

然后是对应的模板文件myConfirmDialog.component.html，直接从configuration对象中读取属性即可：

<div class="confirm-dialog">
  <div class="dialog-content">
    <p>{{ configuration.messageText }}</p>
  </div>
  <div class="dialog-actions">
    <button class="btn-cancel" (click)="closeDialog()">取消</button>
    <button class="btn-confirm" (click)="handleConfirm()">
      {{ configuration.confirmButtonLabel }}
    </button>
  </div>
</div>

组件使用示例 #

在父组件中，你可以这样定义配置并传递给对话框：

// 父组件.ts文件
import { Component } from '@angular/core';
import { Configuration } from '../model/confirmModal.model';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 定义对话框配置
  deleteConfirmConfig: Configuration = {
    messageText: '确定要删除这条数据吗？删除后无法恢复',
    confirmButtonLabel: '确认删除',
    acceptFunction: () => {
      // 这里写确认后的业务逻辑，比如调用删除接口
      console.log('执行删除操作');
      // 可在此处添加关闭对话框的逻辑（比如调用模态框服务的关闭方法）
    }
  };
}

父组件模板中引用对话框：

<!-- 假设使用Angular CDK模态框打开组件，此处简化示例 -->
<app-my-confirm-dialog [configuration]="deleteConfirmConfig"></app-my-confirm-dialog>

额外建议 #

• 可以给Configuration的属性添加可选标记（如?:），或者在组件中设置默认值，增强组件的容错性
• 如果需要支持取消逻辑，可以在Configuration中新增cancelFunction属性，参照acceptFunction的方式处理

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