Angular12+PrimeNG项目如何实现可复用CRUD表单简化开发流程？

针对问题1的解答 #

你当前的冗余核心来自于CRUD通用逻辑（列表加载、增删改弹窗、校验提示、批量操作等）在7-8个模块重复编写，同事的建议方向完全正确，优化路径可按优先级逐步推进：

• 第一步：先抽离公共抽象泛型基类，把所有和业务实体无关的通用逻辑（弹窗状态管理、列表加载、全局过滤、删除确认、保存提示、销毁流处理等）全部封装到BaseCrudComponent<T>泛型类中，每个业务组件只需要继承该类，传入对应实体类型、业务服务、面包屑配置、实体中文名即可，这一步可以直接砍掉70%以上的重复TS代码。
• 第二步：表单层改用响应式表单+动态渲染逻辑，把当前模板驱动表单的硬编码字段，替换为可配置的字段元数据数组，每个元数据项包含字段名、标签、校验规则、控件类型、是否可排序、是否参与全局搜索等属性，模板中通过*ngFor动态渲染表格列和表单控件，无需每个模块单独编写表格、表单模板。
• 现有成熟工具可直接使用@ngx-formly/primeng动态表单库，已完美适配PrimeNG组件体系，你只需要传入字段配置和响应式表单实例即可自动生成表单，不需要自行开发动态表单的底层逻辑。

针对问题2的解答 #

你参考的开源实现思路完全可以在你的项目中复用，该实现的核心就是将CRUD通用逻辑下沉到基类/公共服务，业务层只保留差异化的字段配置和业务规则，和你当前的场景匹配度极高，适配过程只需要注意将你当前使用的模板驱动表单切换为响应式表单即可，改造成本很低。

简易优化示例（抽象基类） #

// 通用CRUD抽象基类
import { Observable, Subject, takeUntil } from 'rxjs';
import { ViewChild, OnDestroy, OnInit } from '@angular/core';
import { Table } from 'primeng/table';
import { ConfirmationService, MessageService, PrimeNGConfig } from 'primeng/api';
import { BreadcrumbService } from '@core/services';

export abstract class BaseCrudComponent<T extends { id?: number }> implements OnInit, OnDestroy {
  itemDialog: boolean;
  items: T[];
  currentItem: T;
  selectedItems: T[];
  submitted: boolean;
  loading = true;
  protected componentDestroyed$ = new Subject<boolean>();
  
  @ViewChild('dt') table: Table;

  protected constructor(
    protected messageService: MessageService,
    protected confirmationService: ConfirmationService,
    protected breadcrumbService: BreadcrumbService,
    protected primengConfig: PrimeNGConfig,
    protected crudService: { 
      getAll: () => Observable<T[]>, 
      delete: (id: number) => Observable<void>, 
      save: (item: T) => Observable<T> 
    },
    protected config: {
      breadcrumbLabel: string;
      entityName: string;
      deleteConfirmMsg: (item?: T) => string;
      successMsg: (type: 'add' | 'edit' | 'delete' | 'batchDelete') => string;
    }
  ) {
    this.breadcrumbService.setItems([{ label: config.breadcrumbLabel }]);
  }

  ngOnInit(): void {
    this.loadList();
    this.primengConfig.ripple = true;
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next(true);
    this.componentDestroyed$.complete();
  }

  loadList(): void {
    this.crudService.getAll()
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(data => {
        this.items = data;
        this.loading = false;
      });
  }

  applyFilterGlobal($event: any): void {
    this.table.filterGlobal(($event.target as HTMLInputElement).value, 'contains');
  }

  openNew(): void {
    this.currentItem = {} as T;
    this.submitted = false;
    this.itemDialog = true;
  }

  // 剩余的deleteSelected、editItem、deleteItem、hideDialog、saveItem等通用方法都可以按这个逻辑封装到基类中，差异化文本通过传入的config拼接生成
}

业务组件继承后仅需要编写差异化的字段配置、表单定义即可，无需重复编写通用逻辑。

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