无法从具有@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这两个依赖包。可以通过运行以下命令来安装它们：

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

1. 在你的应用程序中，创建一个名为counter的状态（state）。可以使用@ngrx/store来管理应用程序的状态。在这个状态中，定义一个名为count的属性来存储计数值。例如：

// counter.state.ts

export interface CounterState {

 count: number;

}

export const initialState: CounterState = {

 count: 0

};

1. 创建一个名为counter.actions.ts的文件，用于定义与计数相关的操作。例如，可以定义一个名为Increment的操作来增加计数值。例如：

// counter.actions.ts

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

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

1. 创建一个名为counter.reducer.ts的文件，用于处理与计数相关的操作。在这个reducer中，根据不同的操作类型更新计数值。例如：

// counter.reducer.ts

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

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

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

export const counterReducer = createReducer(

 initialState,

 on(increment, (state) => {

   return {

     ...state,

     count: state.count + 1

   };

 })

);

1. 在你的应用程序的模块文件中，将counterReducer添加到StoreModule的reducers中。例如：

// app.module.ts

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

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

@NgModule({

 imports: [

   StoreModule.forRoot({ counter: counterReducer })

 ]

})

export class AppModule { }

1. 在你的组件中，使用@ngrx/store来选择（select）计数值。可以通过创建一个名为selectCount的选择器来选择计数值。例如：

// counter.selectors.ts

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

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

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

export const selectCount = createSelector(

 selectCounterState,

 (state: CounterState) => state.count

);

1. 在你的组件中，使用@ngrx/effects来处理与计数相关的副作用。可以创建一个名为CounterEffects的效果（effect），在这个效果中，订阅（subscribe）计数值的变化，并执行相应的操作。例如：

// 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 {

 logCount$ = createEffect(() => {

   return this.actions$.pipe(

     ofType('[Counter] Increment'),

     select(selectCount),

     tap((count) => {

       console.log('Count:', count);

     })

   );

 });

 constructor(private actions$: Actions) {}

}

1. 在你的应用程序的模块文件中，将CounterEffects添加到EffectsModule的effects中。例如：

// app.module.ts

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

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

@NgModule({

 imports: [

   EffectsModule.forRoot([CounterEffects])

 ]

})

export class AppModule { }

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

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

• @ngrx/effects: https://ngrx.io/guide/effects
• @ngrx/store: https://ngrx.io/guide/store