Как сохранить динамический компонент в ngrx / store? Как загрузить динамический компонент из ngrx / store?

Я хочу сохранить динамический компонент в @ ngrx / store. но я получаю ERROR TypeError: не могу зависнуть при отправке действия из моего компонента.

Я перешел на эту страницу Почему я получаю 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
);

person 通りすがりのおっさん    schedule 13.01.2019    source источник


Ответы (1)


Не сохраняйте экземпляр компонента в магазине ngRx.

Создайте сервис, который сохранит набор компонентов, которые вы хотите отображать динамически. Задайте имя компонента как ключ, а фабрику компонентов как значение.

В магазине вы можете сохранить имя компонента и использовать его для извлечения компонента из созданной вами службы.

person Radovan Skendzic    schedule 30.10.2020