Javascript 角度8将ngrx状态绑定到组件

我是Angular的新手，我想将HTML中的一些类名绑定到我所在州的一些值。起初我只有一个状态，只有一些布尔值，一切正常。现在我将状态更改为对象，以便在其中保存更多信息。虽然我使用的方法和以前差不多，但是类名没有改变。国家确实发生了变化。有人能告诉我我的错误是什么吗？如果有其他更合适的方法来做我想做的事情，请也告诉我

角度版本是8.2.14

这是我的代码：

1.ts：

export type ShoppinCartState = {
  CartIsOpen: boolean;
};

export type HamburgerState = {
  MenuIsOpen: boolean;
};

export function hamburgerReducer(
  state: HamburgerState = { MenuIsOpen: false },
  action: Action
) {
  switch (action.type) {
    case "HAMBURGER.TOGGLE":
      console.log("HAMBURGER.Toggle called " + state.MenuIsOpen);
      return {
        ...state,
        MenuIsOpen: !state.MenuIsOpen
      };
    case "HAMBURGER.CLOSE":
      return {
        ...state,
        MenuIsOpen: false
      };
    case "HAMBURGER.OPEN":
      return {
        ...state,
        MenuIsOpen: true
      };
    default:
      return state;
  }
}

export function shoppingCartReducer(
  state: ShoppinCartState = { CartIsOpen: false },
  action: Action
) {
  switch (action.type) {
    case "CART.TOGGLE":
      console.log("Tooggle cart called " + state.CartIsOpen);
      return {
        ...state,
        CartIsOpen: !state.CartIsOpen
      };
    default:
      return state;
  }
}

这是我的组件。当用户单击汉堡包图标时，将发送一个操作，该操作将更改状态。还有另一部分绑定到状态。当该值为true时，类名应为“可见”

---

当您将

存储

注入组件时，您将对全局状态的结构进行操作。因此，select必须“选择”此结构才能访问正确的对象

只有reducer函数得到这个全局状态的一部分。我们可以在您定义商店的

app.module.ts

中看到：

    StoreModule.forRoot({
      hamburgerReducer: hamburgerReducer,
      shoppingCartReducer: shoppingCartReducer
    })

最佳做法是创建一个描述商店结构的界面

状态
：

export interface State {
   hamburgerReducer: HamburgerState;
   shoppingCartReducer: ShoppingCartState;
}

然后在注入存储时使用此接口：

constructor(private store: Store<State>)

所有事物都被合并到一个全局状态。因此，没有两个独立的状态。在
app.module.ts
中，您应该有类似于
StoreModule.forRoot（reducers，
或一个可能的全局
状态
界面，该界面告诉您存储的结构。您可能需要通过一个选择器函数进行选择，该选择器函数提供完整的状态对象
this.store.select（state=>state.hamburgers.MenuIsOpen）
好的……我试着遵循`构造函数（私有商店：商店）{this.hamburgerClicked$=this.store.select（state=>state.MenuIsOpen）；}`但它仍然不起作用…请尝试
state.hamburgereducer.MenuIsOpen
并从
存储中删除类型
HamburgerState
。在测试期间，当我键入state时，使用
any
。hamburgereducer.MenuIsOpen Visual Studio代码告诉我类型“HamburgerState”上不存在hamburgereducer…但它现在可以工作了o奇怪的行为。非常感谢！在
Store
中键入
HamburgerSate
是错误的。请使用
any
或更好地定义一个描述全局存储结构的接口
State
。我已经尝试过这个方法，但遗憾的是，我在重新加载页面时遇到以下错误：TypeError:undefined不是对象（评估“_co.shoppingCartState$.CartIsOpen”）…加载时似乎没有定义某些内容
    StoreModule.forRoot({
      hamburgerReducer: hamburgerReducer,
      shoppingCartReducer: shoppingCartReducer
    })

export interface State {
   hamburgerReducer: HamburgerState;
   shoppingCartReducer: ShoppingCartState;
}

constructor(private store: Store<State>)

this.store.select(state => state.hamburgerReducer.MenuIsOpen)