在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进行状态管理,并通过可观察集合来跟踪状态的变化了。