Angular 2+中复用需不同业务脚本的组件的最优方案咨询

针对你遇到的表单复用+多业务逻辑问题，以下是几种工程化的优质方案，可根据场景选择：

方案一：抽象服务+依赖注入（最推荐，符合开闭原则） #

核心思路是定义通用业务接口，让不同表单的业务服务实现该接口，组件直接依赖接口而非具体服务，彻底消除条件判断。

1. 定义抽象基类/接口 #

// base-form.service.ts
import { Observable } from 'rxjs';

export abstract class BaseFormService {
  // 通用业务方法：表单提交
  abstract submit(formData: any): Observable<any>;
  // 通用业务方法：表单校验
  abstract validate(formData: any): boolean;
  // 可根据需求扩展其他通用方法
}

2. 实现具体业务服务 #

针对不同表单类型，创建对应的服务实现基类方法：

// user-form.service.ts
import { Injectable } from '@angular/core';
import { BaseFormService } from './base-form.service';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class UserFormService extends BaseFormService {
  constructor(private http: HttpClient) {}

  submit(formData: any): Observable<any> {
    return this.http.post('/api/users', formData);
  }

  validate(formData: any): boolean {
    return !!formData.username && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email);
  }
}

// product-form.service.ts
import { Injectable } from '@angular/core';
import { BaseFormService } from './base-form.service';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ProductFormService extends BaseFormService {
  constructor(private http: HttpClient) {}

  submit(formData: any): Observable<any> {
    return this.http.post('/api/products', formData);
   }

  validate(formData: any): boolean {
    return !!formData.name && formData.price > 0;
  }
}

3. 复用组件依赖抽象服务 #

组件通过@Input接收具体服务实例，直接调用接口方法，无需判断类型：

// reusable-form.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { BaseFormService } from './base-form.service';

@Component({
  selector: 'app-reusable-form',
  template: `
    <h2>{{ title }}</h2>
    <form [formGroup]="form" (ngSubmit)="handleSubmit()">
      <div *ngFor="let field of fields">
        <label class="form-label">{{ field.label }}</label>
        <input 
          class="form-input"
          [formControlName]="field.name" 
          [type]="field.type || 'text'">
      </div>
      <button type="submit" [disabled]="form.invalid">提交</button>
    </form>
  `
})
export class ReusableFormComponent implements OnInit {
  @Input() title!: string;
  @Input() fields!: Array<{ label: string; name: string; type?: string }>;
  @Input() formService!: BaseFormService;
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 根据传入的字段动态构建表单
    const controls = this.fields.reduce((acc, field) => {
      acc[field.name] = [''];
      return acc;
    }, {} as Record<string, any>);
    this.form = this.fb.group(controls);
  }

  handleSubmit(): void {
    const formData = this.form.value;
    if (this.formService.validate(formData)) {
      this.formService.submit(formData).subscribe({
        next: () => alert('提交成功'),
        error: () => alert('提交失败')
      });
    } else {
      alert('表单校验不通过');
    }
  }
}

4. 父组件中传入对应服务 #

// parent.component.ts
import { Component } from '@angular/core';
import { UserFormService } from './user-form.service';
import { ProductFormService } from './product-form.service';

@Component({
  selector: 'app-parent',
  template: `
    <app-reusable-form
      [title]="'用户注册'"
      [fields]="userFields"
      [formService]="userFormService">
    </app-reusable-form>

    <app-reusable-form
      [title]="'产品新增'"
      [fields]="productFields"
      [formService]="productFormService">
    </app-reusable-form>
  `,
  providers: [UserFormService, ProductFormService]
})
export class ParentComponent {
  userFields = [
    { label: '用户名', name: 'username' },
    { label: '邮箱', name: 'email', type: 'email' }
  ];

  productFields = [
    { label: '产品名称', name: 'name' },
    { label: '价格', name: 'price', type: 'number' }
  ];

  constructor(
    public userFormService: UserFormService,
    public productFormService: ProductFormService
  ) {}
}

方案二：内容投影+子组件（适合带局部UI差异的场景） #

如果不同表单除了业务逻辑，还有局部UI/交互差异，可以把通用表单框架作为"壳组件"，差异部分通过内容投影交给子组件实现：

1. 通用壳组件 #

// form-shell.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-form-shell',
  template: `
    <div class="form-container">
      <h2>{{ title }}</h2>
      <!-- 投影自定义头部 -->
      <ng-content select="[form-header]"></ng-content>
      <!-- 投影自定义表单字段 -->
      <form (ngSubmit)="submit.emit()">
        <ng-content select="[form-fields]"></ng-content>
        <button type="submit">提交</button>
      </form>
    </div>
  `
})
export class FormShellComponent {
  @Input() title!: string;
  @Output() submit = new EventEmitter<void>();
}

2. 具体表单子组件 #

// user-form.component.ts
import { Component } from '@angular/core';
import { UserFormService } from './user-form.service';

@Component({
  selector: 'app-user-form',
  template: `
    <app-form-shell [title]="'用户注册'" (submit)="onSubmit()">
      <div form-header>
        <p>请填写以下信息完成注册</p>
      </div>
      <div form-fields>
        <label>用户名：</label>
        <input [(ngModel)]="userData.username">
        <label>邮箱：</label>
        <input [(ngModel)]="userData.email">
      </div>
    </app-form-shell>
  `
})
export class UserFormComponent {
  userData = { username: '', email: '' };

  constructor(private userService: UserFormService) {}

  onSubmit(): void {
    this.userService.submit(this.userData).subscribe(...);
  }
}

方案三：策略模式（简化版接口实现） #

如果不想用抽象类，也可以直接定义策略接口，组件接收策略对象：

// form-strategy.ts
export interface FormStrategy {
  submit: (data: any) => void;
  validate: (data: any) => boolean;
}

// 用户表单策略
export const userFormStrategy: FormStrategy = {
  submit: (data) => { /* 提交逻辑 */ },
  validate: (data) => !!data.username && !!data.email
};

// 组件中使用
@Component({...})
export class ReusableFormComponent {
  @Input() strategy!: FormStrategy;

  handleSubmit() {
    if (this.strategy.validate(this.form.value)) {
      this.strategy.submit(this.form.value);
    }
  }
}

内容的提问来源于stack exchange，提问作者Pedro Augusto Almeida Duarte