在Angular中使用NGXS进行状态管理时,可以通过定义可观察集合来跟踪状态的变化。下面是一个包含代码示例的解决方法:
npm install @ngxs/store @ngxs/devtools rxjs
NgxsModule和NgxsReduxDevtoolsPluginModule:import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools';
@NgModule({
imports: [
NgxsModule.forRoot([]),
NgxsReduxDevtoolsPluginModule.forRoot()
],
})
export class AppModule { }
CounterState的状态类,其中包含一个名为count的属性和两个操作:Increment和Decrement。import { State, Action, StateContext } from '@ngxs/store';
export class Increment {
static readonly type = '[Counter] Increment';
}
export class Decrement {
static readonly type = '[Counter] Decrement';
}
export interface CounterStateModel {
count: number;
}
@State({
name: 'counter',
defaults: {
count: 0
}
})
export class CounterState {
@Action(Increment)
increment(ctx: StateContext) {
const state = ctx.getState();
ctx.setState({
...state,
count: state.count + 1
});
}
@Action(Decrement)
decrement(ctx: StateContext) {
const state = ctx.getState();
ctx.setState({
...state,
count: state.count - 1
});
}
}
Select装饰器和Observable来订阅状态的变化。在这个例子中,我们创建一个名为CounterComponent的组件,并使用Select装饰器和Observable来订阅count属性的变化。import { Component, OnInit } from '@angular/core';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CounterState, CounterStateModel } from './counter.state';
@Component({
selector: 'app-counter',
template: `
Counter: {{ count$ | async }}
`,
})
export class CounterComponent implements OnInit {
@Select(CounterState.count)
count$: Observable;
constructor(private store: Store) {}
ngOnInit() {}
increment() {
this.store.dispatch(new Increment());
}
decrement() {
this.store.dispatch(new Decrement());
}
}
在这个示例中,count$是一个Observable,它通过@Select装饰器从CounterState中选择count属性。在模板中使用async管道来订阅count$并显示状态的当前值。
通过以上步骤,你就可以在Angular中使用NGXS进行状态管理,并通过可观察集合来跟踪状态的变化了。