Angular NGRX传递组件至Action遇对象不可扩展，如何局部修复？

问题场景 #

基于Angular NGRX实现对话框状态管理时，在Action的payload中传递LoginDialogComponent组件类后触发错误：

Cannot add property NG_ELEMENT_ID, object is not extensible

临时关闭全局NGRX运行时检查strictActionImmutability: false可解决问题，但希望找到局部修复方案或更合理的实现方式。

问题原因 #

NGRX的strictActionImmutability检查会冻结Action的payload对象（使其不可扩展、不可修改），而Angular在处理组件类时，需要为其添加静态属性NG_ELEMENT_ID，被冻结的组件类无法添加新属性，因此抛出错误。

解决方案 #

方案1：Action仅传递标识，Effect映射组件（推荐） #

Reducer中并未使用payload.component字段（仅用到了config），完全可以将组件类的处理逻辑从Action转移到Effect中，Action仅传递对话框的类型标识，避免组件类被冻结。

调整组件代码

public openLoginDialog(){
  this.store.dispatch(
    DialogActions.openDialog({
      payload: {
        dialogType: 'login', // 用字符串标识代替组件类
        config: {
          styleClass: 'auth-custom-dialog',
          modal: true,
          showHeader: false,
          closeOnEscape: true,
          dismissableMask: true,
        },
      } as InitDialogPayload
    }))
}

调整Effect代码

export class DialogEffects {
  // 维护对话框类型与组件的映射表
  private dialogComponentMap = {
    'login': LoginDialogComponent,
    // 可添加其他对话框类型
  };

  openDialog$ = createEffect(() => this.actions$.pipe(
    ofType(DialogActions.openDialog),
    tap(action => {
      const targetComponent = this.dialogComponentMap[action.payload.dialogType];
      this.customDialogService.openDialog({ 
        component: targetComponent, 
        ...action.payload 
      });
    }),
  ), {dispatch: false});

  constructor(private actions$: Actions, private customDialogService: CustomDialogsService) {}
}

调整InitDialogPayload定义

移除component字段，新增dialogType: string字段，确保payload仅传递必要数据。

方案2：局部避免组件类被冻结（不推荐） #

如果必须在Action中传递组件类，可以在dispatch前对组件类进行包装，避免其被NGRX冻结。但这种方式会绕过部分NGRX的不变性约束，仅作为临时局部修复：

public openLoginDialog(){
  // 用Object.create包装组件类，避免被冻结
  const wrappedComponent = Object.create(LoginDialogComponent);
  this.store.dispatch(
    DialogActions.openDialog({
      payload: {
        component: wrappedComponent,
        config: {
          styleClass: 'auth-custom-dialog',
          modal: true,
          showHeader: false,
          closeOnEscape: true,
          dismissableMask: true,
        },
      } as InitDialogPayload
    }))
}

额外修复：对话框关闭时的Action dispatch #

自定义对话框服务中，当前仅调用了Action创建函数，并未将关闭Action dispatch到Store，需注入Store并修正：

import { Store } from '@ngrx/store';

export class CustomDialogsService {
  constructor(private dialogService: DialogService, private store: Store) {}

  public openDialog(content: InitDialogPayload){
    const dialogRef = this.dialogService.open(content.component, content.config);
    dialogRef.onClose.subscribe((result: any) => {
      // 修正：dispatch关闭Action到Store
      this.store.dispatch(DialogActions.closeDialog({
        payload: {
          dialogId: content.dialogId
        } as CloseDialogPayload
      }));
    });
  }
}

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