Angular中可复用组件标准布局的实现优化方案问询

问题背景 #

正在构建遵循FormLayoutComponent规范的可复用UI控件，该组件包含标签、编辑/确认按钮、读写视图切换等功能。当前实现需要在每个UI组件中重复声明FormLayoutComponent的输入/输出属性，后续若给FormLayoutComponent新增属性，必须逐个更新所有UI组件的类和模板。尝试通过抽象类继承解决了TypeScript层面的属性重复声明问题，但新增属性时仍需手动更新每个组件的HTML模板。

抽象类代码示例：

export abstract class AbstractLayout<T = any> {
  @Input() control: FormControl<T | null> = new FormControl<T | null>(null);
  @Output() confirm: EventEmitter<T | null> = new EventEmitter<T | null>();
  @Input() defaultMode: DefaultMode = 'read';
  @Input() showEditButton = true;
  @Input() editButtonIcon = 'edit';
  @Input() showConfirmButton = true;
  @Input() showCancelButton = true;
  @Input() showLabel = true;
  @Input() requireConfirmation = true;
  @Input() label: string = '';
}

优化方案 #

1. 组件内容投影（Content Projection） #

将FormLayoutComponent作为通用布局容器，负责处理标签、按钮、读写模式切换等逻辑，具体的表单控件UI组件通过内容投影嵌入其中。这样所有输入/输出属性只需在FormLayoutComponent上声明，无需在每个UI组件中重复定义。

FormLayoutComponent 核心实现：

@Component({
  selector: 'app-form-layout',
  template: `
    <div class="form-layout">
      <label *ngIf="showLabel">{{ label }}</label>
      <!-- 投影具体表单控件 -->
      <ng-content></ng-content>
      <!-- 编辑/确认按钮组 -->
      <div class="action-buttons">
        <button *ngIf="showEditButton && mode === 'read'" (click)="switchToEdit()">
          <mat-icon>{{ editButtonIcon }}</mat-icon>
        </button>
        <button *ngIf="showConfirmButton && mode === 'edit'" (click)="onConfirm()">确认</button>
        <button *ngIf="showCancelButton && mode === 'edit'" (click)="switchToRead()">取消</button>
      </div>
    </div>
  `
})
export class FormLayoutComponent<T = any> {
  @Input() control: FormControl<T | null> = new FormControl<T | null>(null);
  @Output() confirm: EventEmitter<T | null> = new EventEmitter<T | null>();
  @Input() defaultMode: DefaultMode = 'read';
  @Input() showEditButton = true;
  @Input() editButtonIcon = 'edit';
  @Input() showConfirmButton = true;
  @Input() showCancelButton = true;
  @Input() showLabel = true;
  @Input() requireConfirmation = true;
  @Input() label: string = '';

  mode: DefaultMode = this.defaultMode;

  switchToEdit() {
    this.mode = 'edit';
  }

  switchToRead() {
    this.mode = 'read';
    this.control.reset(this.control.value);
  }

  onConfirm() {
    if (this.requireConfirmation && this.control.valid) {
      this.confirm.emit(this.control.value);
      this.switchToRead();
    }
  }
}

UI组件使用方式：

<app-form-layout 
  [control]="nameControl" 
  label="姓名"
  (confirm)="onNameConfirm($event)"
>
  <!-- 嵌入具体的输入控件 -->
  <input 
    *ngIf="formLayout.mode === 'edit'" 
    [formControl]="nameControl" 
    type="text"
  >
  <span *ngIf="formLayout.mode === 'read'">{{ nameControl.value }}</span>
</app-form-layout>

通过@ViewChild(FormLayoutComponent)可以在UI组件中获取布局容器的实例，从而访问mode等状态。

2. 封装输入属性为单一配置对象 #

将所有布局相关的输入属性合并为一个配置对象，这样新增属性时只需扩展配置接口，无需修改组件的@Input()声明，模板中也只需绑定配置对象的属性。

定义配置接口：

export interface FormLayoutConfig<T = any> {
  control: FormControl<T | null>;
  defaultMode?: DefaultMode;
  showEditButton?: boolean;
  editButtonIcon?: string;
  showConfirmButton?: boolean;
  showCancelButton?: boolean;
  showLabel?: boolean;
  requireConfirmation?: boolean;
  label?: string;
}

组件实现：

@Component({
  selector: 'app-base-form-control',
  template: `
    <div class="form-layout">
      <label *ngIf="config.showLabel">{{ config.label }}</label>
      <!-- 读写视图逻辑 -->
      <ng-container [ngSwitch]="mode">
        <ng-container *ngSwitchCase="'read'">
          <ng-content select="[read-view]"></ng-content>
          <button *ngIf="config.showEditButton" (click)="mode = 'edit'">
            <mat-icon>{{ config.editButtonIcon }}</mat-icon>
          </button>
        </ng-container>
        <ng-container *ngSwitchCase="'edit'">
          <ng-content select="[edit-view]"></ng-content>
          <button *ngIf="config.showConfirmButton" (click)="onConfirm()">确认</button>
          <button *ngIf="config.showCancelButton" (click)="mode = 'read'">取消</button>
        </ng-container>
      </ng-container>
    </div>
  `
})
export class BaseFormControlComponent<T = any> {
  @Input() config: FormLayoutConfig<T> = {
    control: new FormControl<T | null>(null),
    defaultMode: 'read',
    showEditButton: true,
    editButtonIcon: 'edit',
    showConfirmButton: true,
    showCancelButton: true,
    showLabel: true,
    requireConfirmation: true,
    label: ''
  };
  @Output() confirm: EventEmitter<T | null> = new EventEmitter<T | null>();

  mode: DefaultMode = this.config.defaultMode;

  onConfirm() {
    if (this.config.requireConfirmation && this.config.control.valid) {
      this.confirm.emit(this.config.control.value);
      this.mode = 'read';
    }
  }
}

使用方式：

<app-base-form-control 
  [config]="{
    control: ageControl,
    label: '年龄',
    showEditButton: true
  }"
  (confirm)="onAgeConfirm($event)"
>
  <span read-view>{{ ageControl.value }}</span>
  <input edit-view [formControl]="ageControl" type="number">
</app-base-form-control>

后续新增布局属性时，只需在FormLayoutConfig接口中添加字段，组件类和模板无需修改，仅需在使用时按需传入新配置即可。

3. 继承+模板复用 #

保留抽象类继承的方式，同时将FormLayoutComponent的模板抽成可复用的ng-template，子组件通过ngTemplateOutlet引用该模板，避免每个子组件重复编写布局代码。

FormLayoutComponent 模板抽离：

<!-- form-layout-template.component.html -->
<ng-template #formLayoutTemplate let-config="config" let-mode="mode" let-onConfirm="onConfirm" let-switchMode="switchMode">
  <div class="form-layout">
    <label *ngIf="config.showLabel">{{ config.label }}</label>
    <ng-content></ng-content>
    <div class="action-buttons">
      <button *ngIf="config.showEditButton && mode === 'read'" (click)="switchMode('edit')">
        <mat-icon>{{ config.editButtonIcon }}</mat-icon>
      </button>
      <button *ngIf="config.showConfirmButton && mode === 'edit'" (click)="onConfirm()">确认</button>
      <button *ngIf="config.showCancelButton && mode === 'edit'" (click)="switchMode('read')">取消</button>
    </div>
  </div>
</ng-template>

子组件使用：

@Component({
  selector: 'app-age-control',
  template: `
    <ng-container 
      [ngTemplateOutlet]="formLayoutTemplate"
      [ngTemplateOutletContext]="{
        config: config,
        mode: mode,
        onConfirm: onConfirm,
        switchMode: switchMode
      }"
    >
      <!-- 具体控件内容 -->
      <span *ngIf="mode === 'read'">{{ config.control.value }}</span>
      <input *ngIf="mode === 'edit'" [formControl]="config.control" type="number">
    </ng-container>
  `
})
export class AgeControlComponent extends AbstractLayout<number> {
  mode: DefaultMode = this.defaultMode;

  switchMode(newMode: DefaultMode) {
    this.mode = newMode;
    if (newMode === 'read') {
      this.control.reset(this.control.value);
    }
  }

  onConfirm() {
    if (this.requireConfirmation && this.control.valid) {
      this.confirm.emit(this.control.value);
      this.switchMode('read');
    }
  }
}

这种方式既通过抽象类统一了属性声明，又通过模板复用避免了每个子组件重复编写布局代码，新增属性时仅需修改抽象类和共享模板，无需逐个更新子组件的模板。

总结 #

无需逐个更新所有UI组件，上述三种方案均可解决问题：

• 内容投影适合将布局与业务控件完全分离，是最推荐的Angular组件组合方式；
• 配置对象封装适合属性较多的场景，简化组件输入声明；
• 继承+模板复用适合需要保留组件继承关系的场景。

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