首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法从具有@ngrx/effects@4.1.1和@ngrx/store@4.1.1的angular 4中的观察值获取计数

在具有@ngrx/effects@4.1.1和@ngrx/store@4.1.1的Angular 4中,要从观察值中获取计数,可以按照以下步骤进行操作:

  1. 首先,确保已经安装了@ngrx/effects和@ngrx/store这两个依赖包。可以通过运行以下命令来安装它们:
代码语言:txt
复制

npm install @ngrx/effects@4.1.1 @ngrx/store@4.1.1

代码语言:txt
复制
  1. 在你的应用程序中,创建一个名为counter的状态(state)。可以使用@ngrx/store来管理应用程序的状态。在这个状态中,定义一个名为count的属性来存储计数值。例如:
代码语言:typescript
复制

// counter.state.ts

export interface CounterState {

代码语言:txt
复制
 count: number;

}

export const initialState: CounterState = {

代码语言:txt
复制
 count: 0

};

代码语言:txt
复制
  1. 创建一个名为counter.actions.ts的文件,用于定义与计数相关的操作。例如,可以定义一个名为Increment的操作来增加计数值。例如:
代码语言:typescript
复制

// counter.actions.ts

import { createAction } from '@ngrx/store';

export const increment = createAction('Counter Increment');

代码语言:txt
复制
  1. 创建一个名为counter.reducer.ts的文件,用于处理与计数相关的操作。在这个reducer中,根据不同的操作类型更新计数值。例如:
代码语言:typescript
复制

// counter.reducer.ts

import { createReducer, on } from '@ngrx/store';

import { increment } from './counter.actions';

import { initialState } from './counter.state';

export const counterReducer = createReducer(

代码语言:txt
复制
 initialState,
代码语言:txt
复制
 on(increment, (state) => {
代码语言:txt
复制
   return {
代码语言:txt
复制
     ...state,
代码语言:txt
复制
     count: state.count + 1
代码语言:txt
复制
   };
代码语言:txt
复制
 })

);

代码语言:txt
复制
  1. 在你的应用程序的模块文件中,将counterReducer添加到StoreModule的reducers中。例如:
代码语言:typescript
复制

// app.module.ts

import { StoreModule } from '@ngrx/store';

import { counterReducer } from './counter.reducer';

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   StoreModule.forRoot({ counter: counterReducer })
代码语言:txt
复制
 ]

})

export class AppModule { }

代码语言:txt
复制
  1. 在你的组件中,使用@ngrx/store来选择(select)计数值。可以通过创建一个名为selectCount的选择器来选择计数值。例如:
代码语言:typescript
复制

// counter.selectors.ts

import { createSelector, createFeatureSelector } from '@ngrx/store';

import { CounterState } from './counter.state';

export const selectCounterState = createFeatureSelector<CounterState>('counter');

export const selectCount = createSelector(

代码语言:txt
复制
 selectCounterState,
代码语言:txt
复制
 (state: CounterState) => state.count

);

代码语言:txt
复制
  1. 在你的组件中,使用@ngrx/effects来处理与计数相关的副作用。可以创建一个名为CounterEffects的效果(effect),在这个效果中,订阅(subscribe)计数值的变化,并执行相应的操作。例如:
代码语言:typescript
复制

// counter.effects.ts

import { Injectable } from '@angular/core';

import { Actions, createEffect, ofType } from '@ngrx/effects';

import { tap } from 'rxjs/operators';

import { selectCount } from './counter.selectors';

@Injectable()

export class CounterEffects {

代码语言:txt
复制
 logCount$ = createEffect(() => {
代码语言:txt
复制
   return this.actions$.pipe(
代码语言:txt
复制
     ofType('[Counter] Increment'),
代码语言:txt
复制
     select(selectCount),
代码语言:txt
复制
     tap((count) => {
代码语言:txt
复制
       console.log('Count:', count);
代码语言:txt
复制
     })
代码语言:txt
复制
   );
代码语言:txt
复制
 });
代码语言:txt
复制
 constructor(private actions$: Actions) {}

}

代码语言:txt
复制
  1. 在你的应用程序的模块文件中,将CounterEffects添加到EffectsModule的effects中。例如:
代码语言:typescript
复制

// app.module.ts

import { EffectsModule } from '@ngrx/effects';

import { CounterEffects } from './counter.effects';

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   EffectsModule.forRoot([CounterEffects])
代码语言:txt
复制
 ]

})

export class AppModule { }

代码语言:txt
复制

通过以上步骤,你可以在具有@ngrx/effects@4.1.1和@ngrx/store@4.1.1的Angular 4应用程序中从观察值中获取计数值。这样做的好处是可以将状态和副作用(例如日志记录)与应用程序的其他部分分离开来,使代码更加模块化和可维护。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券