如何將動態組件保存到 ngrx/store？ 如何從 ngrx/store 加載動態組件？

Question

我想將動態組件保存到@ngrx/store。 但我收到錯誤類型錯誤：從我的組件調度操作時無法凍結。

我參考了這個頁面為什么我會收到“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
);

Answer 1

不要將組件的實例保存在 ngRx 存儲中。

創建一個服務，它將保留要動態呈現的組件集。 將組件名稱設置為鍵，將組件工廠設置為值。

在商店中，您可以保留組件的名稱，並使用它從您創建的服務中檢索組件。