читать данные NGXS Angular

Question

Я выполняю аутентификацию, используя NGXS .. Я пытаюсь получить текущие данные пользователя после входа в систему и перевести их в состояние, чтобы прочитать их на домашней странице, например (имя пользователя, адрес электронной почты и тип пользователя)

моя функция состояния работает и устанавливает новые значения в состоянии, но я не могу прочитать ее с домашней страницы после входа в систему

возможно, способ, который я использую для получения текущих пользовательских данных, неверен

поэтому мне нужно прочитать имя пользователя и адрес электронной почты, которые хранятся в GetCurrentUser State

Мой auth.state.ts файл

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- плагин из элемента проверки

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

Ваш компонент должен выбрать значение из магазина. Поскольку у вас определен @Selector, вы можете использовать это:

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

или вы можете использовать store.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,
});

Затем в своем шаблоне вы можете использовать asyn c pipe:

<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}>

, либо использовать Partial:

Observable<Partial<AuthStateModel>>

Answer 2

возможно добавление @ Injectable () к AuthState Class