小编Сер*_*гей的帖子

现场演示https://stackblitz.com/edit/angular-vw78jf

我的 ngxs 状态中有 ToppingsStateModel

export interface ToppingsStateModel {
  entities: { [ id: number ]: Topping };
  selectedToppings: number[];
}

一个操作更改了我的实体列表，另一个操作更改了 selectedToppings。在 products.component 我从选择器中获得浇头列表

export class ToppingsState {
  constructor(private toppingsService: ToppingsService) {
  }

  @Selector()
  static entities(state: ToppingsStateModel) {
    console.log('getEntities', state.entities);
    return state.entities;
  }

  @Selector([ToppingsState.entities])
  static toppings(state: ToppingsStateModel, entities: {[id: number]: Topping}): Topping[] {
    return Object.keys(entities).map(id => entities[parseInt(id, 10)]);
  }
 ...
}

它是 product.component

export class ProductsComponent implements OnInit {

  @Select(ToppingsState.toppings) toppings$: Observable<Topping[]>;

  constructor(private store: Store, private actions$: Actions) {} …

我有两个类 PizzasState 和 ToppingsState。PizzaState 已经有选择器来获取选定的披萨。

@State<PizzaStateModel>({
  name: 'pizzas',
  defaults: initialState
})
export class PizzasState {
  constructor(private pizzaService: PizzasService) {
  }

  @Selector([RouterState])
  static getSelectedPizza(
    state: PizzaStateModel,
    routerState: RouterStateModel<RouterStateParams>
  ): Pizza {
    const pizzaId = routerState.state && routerState.state.params.pizzaId;
    return pizzaId && state.entities[pizzaId];
  }

  @Selector()
  getPizzaVisualized(state: PizzaStateModel): Pizza {
    //
    // what is here?
    //
  }
}

并且 ToppingsState 已选择 Toppings

@State({
  name: 'toppings',
  defaults: initialState
})
export class ToppingsState {
  constructor(private toppingsService: ToppingsService) {
  }

  @Selector()
  static selectedToppings(state: ToppingsStateModel): number[] {
    return …