读取数据 NGXS Angular

Question

我正在使用 NGXS 进行身份验证.. 我正在尝试在登录后获取当前用户数据并将其置于主页中读取的状态，例如（用户名，电子邮件和用户类型）

我的状态函数正在运行并在状态中设置了新值，但我无法在登录后从主页读取它

可能是我获取当前用户数据的方式有误

所以我需要读取存储在 GetCurrentUser State

中的用户名和电子邮件

My auth.state.ts file

export class AuthStateModel {
  token: string;
  email: string;
  user_name: string;
}
@State<AuthStateModel>({
  name: "auth",
  defaults: {
    token: null,
    email: null,
    user_name: null,
  },
})
export class AuthState {
  @Selector()
  static currentUser(state: AuthStateModel) {
    return {
      email: state.email,
      user_name: state.user_name,
    };
  }
  constructor(private authService: AuthService) {}
  @Action(GetCurrentUser)
  getcurrentUser(ctx: StateContext<AuthStateModel>) {
    return this.authService.getCurrentUser().pipe(
      tap((x: any) => {
        const state = ctx.getState();
        ctx.patchState({
          email: x.email,
          user_name: x.user_name,
        });
      })
    );
  }
}

NGX-logger-plugin from inspect element

next state {auth: {…}}auth: {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJod…hYSJ9.nwYZyOmIVLLGx_1FvmrQ-u--6fp0nVphwRfNyE14Xsc", email: "asd@asd.com", user_name: "hsss"}

我的CompanyhomeComponent.ts文件

@Component({
  selector: "kt-companyhome",
  templateUrl: "./companyhome.component.html",
  styleUrls: ["./companyhome.component.scss"],
})
export class CompanyhomeComponent implements OnInit {
  constructor(private store: Store) {}

  ngOnInit(): void {
    this.store.dispatch(new GetCurrentUser());
  }
}

现在我怎样才能在CompanyhomeComponent.html中阅读它我尝试了很多方法，但没有任何效果

Answer 1

也许将 @Injectable() 添加到 AuthState Class

Answer 2

您的组件需要 select 来自商店的值。由于您定义了 @Selector，您可以使用它：

@Select(AuthState.currentUser) user$: Observable<any>;

或者您可以将 store.select 与 select 一起使用或：

user$: Observable<any> = this.store.select(AuthState.currentUser);

或没有：

user$: Observable<any> = this.store.select((state) => {
  return {
    email: state.email,
    user_name: state.user_name,
});

然后在你的模板中你可以使用异步管道：

<div *ngIf="user$ | async; let user">
  <span>{{ user.email }}</span>
  <span>{{ user.user_name }}</span>
</div>

旁注：由于您要返回一个带有电子邮件和 user_name 的对象，而不是令牌，为了避免使用 any，您必须将其声明为匿名类型：

Observable<{email:string; user_name: string}>

或使用部分：

Observable<Partial<AuthStateModel>>

读取数据 NGXS Angular

read data NGXS Angular

angular

state-management

ngxs