在Angular Nrwl Nx中实现数据持久性和非类动作的解决方法可以使用ngrx/store库来管理应用程序的状态。以下是一个使用ngrx/store来实现数据持久性和非类动作的示例代码:
npm install @ngrx/store
StoreModule
和StoreDevtoolsModule
:import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
StoreModule.forRoot({}),
StoreDevtoolsModule.instrument()
],
// other module configurations
})
export class AppModule { }
// app.reducer.ts
import { createAction, createReducer, on } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const counterReducer = createReducer(
0,
on(increment, (state) => state + 1),
on(decrement, (state) => state - 1)
);
select
和dispatch
函数来访问和修改状态:// counter.component.ts
import { Component } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { increment, decrement } from './app.reducer';
@Component({
selector: 'app-counter',
template: `
{{ counter$ | async }}
`,
})
export class CounterComponent {
counter$ = this.store.pipe(select('counter'));
constructor(private store: Store) {}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
}
CounterComponent
:// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Angular Nrwl Nx 数据持久性与非类动作示例
`,
})
export class AppComponent {}
通过以上步骤,你就可以在Angular Nrwl Nx应用程序中实现数据持久性和非类动作了。在上述示例中,我们使用了ngrx/store
库来创建了一个计数器应用程序的状态管理,通过点击按钮来触发状态的更新。