我是Angular的新手,我想将HTML中的某些类名绑定到状态中的某些值。最初,我只有一个状态,这只是一个布尔值,并且一切正常。现在,我将状态更改为对象,以便可以在其中保存更多信息。尽管我使用的方法与以前差不多,但是类名没有改变。状态确实发生了变化。有人可以告诉我我的错误是什么,如果还有另一种更合适的方式来做我想做的事情,请也告诉我。
角度版本为8.2.14。
这是我的代码:
reducer.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时,类名应为“ visible”。
<app-hamburger-icon (click)="onHamburgerIconClick()"></app-hamburger-icon>
<div id="Logo"><a (click)="onLinkClick()" routerLink="/">E99-EsAns</a></div>
<ul [ngClass]="{ visible: hamburgerClicked$ | async }">
这就是component.ts文件
import { Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { HamburgerState } from "src/app/reducer";
@Component({
selector: "app-navigationbar",
templateUrl: "./navigationbar.component.html",
styleUrls: ["./navigationbar.component.css"]
})
export class NavigationbarComponent implements OnInit {
hamburgerClicked$: Observable<boolean>;
constructor(private store: Store<HamburgerState>) {
this.hamburgerClicked$ = this.store.select("MenuIsOpen");
}
ngOnInit() {}
onHamburgerIconClick() {
console.log(this.hamburgerClicked$);
this.store.dispatch({ type: "HAMBURGER.TOGGLE" });
}
onLinkClick() {
this.store.dispatch({ type: "HAMBURGER.CLOSE" });
}
onShoppingCartIconClicked() {
this.store.dispatch({ type: "CART.TOGGLE" });
}
}
我的app.module.ts的某些代码段
import { hamburgerReducer, shoppingCartReducer } from "./reducer";
...
...
...
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
StoreModule.forRoot({
hamburgerReducer: hamburgerReducer,
shoppingCartReducer: shoppingCartReducer
})
],
[将Store
注入组件时,将在全局状态的结构上进行操作。因此,选择必须“选择”进入此结构才能访问正确的对象。
仅减速器函数会获得此全局状态的一部分。我们可以在定义商店的app.module.ts
中看到最可能的代码:
StoreModule.forRoot({
hamburgerReducer: hamburgerReducer,
shoppingCartReducer: shoppingCartReducer
})
最佳做法是创建一个描述商店结构的界面State
:
export interface State {
hamburgerReducer: HamburgerState;
shoppingCartReducer: ShoppingCartState;
}
然后在注入商店时使用此接口:
constructor(private store: Store<State>)
然后您可以通过以下方式选择汉堡菜单状态:
this.store.select(state => state.hamburgerReducer.MenuIsOpen)