Question

我想将动态组件保存到@ ngrx / store。但出现错误TypeError：从组件中调度动作时无法冻结。

我提到了此页面Why do I get "TypeEror: Cannot freeze"?。然后我复制了组件对象。但仍然出现此错误。

组件：

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
);

Answer 1

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

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

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

如何将动态组件保存到ngrx / store？如何从ngrx / store加载动态组件？

1 个答案: