2

我想将动态组件保存到@ngrx/store。但我收到 ERROR TypeError: Cannot freeze when dispatch an action from my component。

我参考了这个页面为什么我得到“TypeEror：无法冻结”？. 我复制了组件对象。但我仍然收到此错误。

零件 ： 

ngOnInit() {
    this.contents$ = this.store.pipe(select(fromContents.getContents));
}

addPhotoChild() {
  const componentFactory = this.CFR.resolveComponentFactory(
    PhotoChildComponent
  );
  const componentRef: ComponentRef<PhotoChildComponent> = 
                   this.VCR.createComponent(componentFactory);
  const currentComponent = componentRef.instance;

  currentComponent.selfRef = currentComponent;
  currentComponent.index = this.index++;
  currentComponent.userId = this.user.id;
  currentComponent.uploadedPhoto.subscribe(val => {
    this.photo = val;
    const cloneComp = Object.assign({}, currentComponent);
    this.store.dispatch(new SaveContents({ comp: cloneComp }));
  });
  currentComponent.compInteraction = this;
  this.componentsReferences.push(componentRef);
}

行动：

export class SaveContents implements Action {
  readonly type = ContentsActionTypes.SAVE_CONTENTS;
  constructor(public payload: { comp: PhotoChildComponent | GmapChildComponent }) {}
}

export class LoadContents implements Action {
  readonly type = ContentsActionTypes.LOAD_CONTENTS;
}

减速器：

export interface ContentsState extends EntityState<PhotoChildComponent | GmapChildComponent> {
  allContentsLoaded: boolean;
}

export const adapter: EntityAdapter<PhotoChildComponent | GmapChildComponent> =
  createEntityAdapter<PhotoChildComponent | GmapChildComponent>();

export const initialContentsState: ContentsState = adapter.getInitialState({
  ids: [],
  entities: {},
  allContentsLoaded: false
});

export function contentsReducer(state = initialContentsState, action: ContentsActions) {
  switch (action.type) {
    case ContentsActionTypes.LOAD_CONTENTS: {
      return {
        ...state,
        allContentsLoaded: true
      };
    }
    case ContentsActionTypes.SAVE_CONTENTS: {
      return adapter.addOne(action.payload.comp, state);
    }

    default:
      return state;
  }
}

选择器：

export const selectContentsState = createFeatureSelector<ContentsState>('contents');

export const getContents = createSelector(
  selectContentsState,
  adapter.getSelectors().selectAll
);
4

1 回答 1

1

不要将组件的实例保存在 ngRx 存储中。

创建一个服务，它将保留您要动态呈现的组件的集合。将组件名称设置为键，将组件工厂设置为值。

在商店中，您可以保留组件的名称，并使用它从您创建的服务中检索组件。

于 2020-10-30T13:41:10.187 回答