Ngxs状态文件内的服务调用

时间:2019-01-07 06:26:53

标签: angular ngxs

我想在auth.state.ts内进行服务呼叫。 这是我的状态文件:

import { EmitterAction, Receiver } from '@ngxs-labs/emitter';
import { Selector, State, StateContext } from '@ngxs/store';
import { TokenResponse, User } from '../models';
import { UserDetailsService } from '../profile/user-profile/user-details.service';

// actions
export class GetUser {
  constructor(private userDetailsService: UserDetailsService) {}
  static readonly type = '[Auth] GetUser';
}
interface AuthStateModel {
  user?: User;
  tokenResponse?: TokenResponse;
}

@State<AuthStateModel>({
  name: 'auth'
})
export class AuthState {
  constructor(private userDetailsService: UserDetailsService) {}

  @Selector()
  static user(state: AuthStateModel) {
    return state.user;
  }

 @Action(GetUser)
     getUser(ctx: StateContext<AuthStateModel>, action: GetUser, userDetailsService: UserDetailsService) {
        console.log('get user');
        // console.log(userDetailsService.userDetailsUrl);

    return userDetailsService
      .getUserInfo()
      .pipe(take(1))
      .subscribe(
        (res: any) => {
          console.log(res.message);
          ctx.patchState({ user: res.message });
        },
        (err: HttpErrorResponse) => {
          console.log(err);
        }
      );
}
}

但是在这里它不会获得我的userDetailsService及其方法和属性。  ***注意*

auth.state.ts文件导入了我的app.module.ts,并且userDetailsService.ts也包含在provide的{​​{1}}部分中。

请提前帮助我

1 个答案:

答案 0 :(得分:1)

如@Zdenek的注释中所述-您需要将其从getUser签名中删除,因为它已经注入到您的状态中,因此您可以通过this.userServiceDetails访问它。

此外,当您调用它时,首选模式是使用pipetap处理结果,而不是直接订阅getUser函数。 使用pipe / tap来制定可观察对象,然后将其返回给NGXS,以便框架负责订阅,