Angular可复用组件适配不同NgRx动作的优雅实现方案咨询

方案1：使用Angular注入令牌（Injection Tokens） #

这是最推荐的优雅方案，利用Angular的依赖注入特性，让共享组件与具体Feature动作完全解耦，只需在各Feature模块中配置一次即可复用。

步骤实现： #

1. 定义动作注入令牌
   创建一个注入令牌，用于提供生成目标动作的工厂函数（支持带参数的动作）：

// shared/tokens/action-tokens.ts
import { InjectionToken } from '@angular/core';
import { Action } from '@ngrx/store';

export const SAVE_ACTION_TOKEN = new InjectionToken<(payload?: any) => Action>(
  'Token for save action factory'
);

2. 改造共享组件
   在组件中注入令牌，点击时调用工厂函数生成动作并分发：

// shared/components/save-button/save-button.component.ts
import { Component, Inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { SAVE_ACTION_TOKEN } from '../../tokens/action-tokens';

@Component({
  selector: 'app-save-button',
  template: `<button (click)="handleSave()" [disabled]="isDisabled">保存</button>`,
})
export class SaveButtonComponent {
  @Input() payload?: any;
  @Input() isDisabled = false;

  constructor(
    private store: Store,
    @Inject(SAVE_ACTION_TOKEN) private saveActionFactory: (payload?: any) => Action
  ) {}

  handleSave() {
    const action = this.saveActionFactory(this.payload);
    this.store.dispatch(action);
  }
}

3. 在Feature模块中配置令牌
   每个Feature模块单独为令牌提供对应的动作工厂：

// feature-a/feature-a.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SaveButtonComponent } from '../shared/components/save-button/save-button.component';
import { SAVE_ACTION_TOKEN } from '../shared/tokens/action-tokens';
import { SaveA, SaveAWithPayload } from './store/actions';

@NgModule({
  imports: [CommonModule],
  declarations: [FeatureAPageComponent],
  providers: [
    {
      provide: SAVE_ACTION_TOKEN,
      useValue: (payload?: any) => {
        return payload ? new SaveAWithPayload(payload) : new SaveA();
      },
    },
  ],
})
export class FeatureAModule {}

同理，在FeatureBModule中提供SaveB动作的工厂函数即可。

优势： #

• 共享组件无需感知任何具体Feature的动作，完全解耦；
• 同一Feature内所有使用该组件的地方自动复用配置，无需重复绑定；
• 支持带参数的动作，灵活性高。

方案2：输入属性传递动作/动作工厂 #

如果需要在同一Feature内的不同组件实例中使用不同动作，可通过@Input直接传递动作或动作工厂：

实现代码： #

// shared/components/save-button/save-button.component.ts
import { Component, Input } from '@angular/core';
import { Store } from '@ngrx/store';
import { Action } from '@ngrx/store';

@Component({
  selector: 'app-save-button',
  template: `<button (click)="handleSave()">保存</button>`,
})
export class SaveButtonComponent {
  // 支持直接传入动作实例，或返回动作的工厂函数
  @Input() saveAction: Action | (() => Action);

  constructor(private store: Store) {}

  handleSave() {
    const action = typeof this.saveAction === 'function' 
      ? this.saveAction() 
      : this.saveAction;
    this.store.dispatch(action);
  }
}

使用方式： #

<!-- Feature A页面组件模板 -->
<app-save-button [saveAction]="() => new SaveA()"></app-save-button>

<!-- 带参数的情况 -->
<app-save-button [saveAction]="() => new SaveAWithPayload(form.value)"></app-save-button>

优势： #

• 灵活性极高，适合同一模块内需要不同动作的场景；
• 实现简单，无需额外配置令牌。

对比你提到的两种思路 #

• @Output绑定：需要每个父组件手动处理事件并分发动作，重复代码多，维护成本高，不推荐；
• 包装组件：会导致组件数量激增（每个动作对应一个包装组件），违背复用原则，同样不推荐。

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