如何选择NGXS状态的一部分？

如何解决如何选择NGXS状态的一部分？

我正在阅读并尝试NGXS的文档：https://www.ngxs.io/concepts/select

除了我要为我的AuthState这么做。

我已经实现了AuthStateModel和AuthState：

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore,AngularFirestoreDocument } from '@angular/fire/firestore';
import { Action,NgxsOnInit,Selector,State,StateContext } from '@ngxs/store';
import { profile } from 'console';
import { User } from 'firebase';
import { LoginWithPasswordAction,Registeraction,SendLostPasswordAction,SignoutAction } from './auth.actions';
import { Profile } from './auth.model';
import { emailToGravatarUrl } from 'email-gravatar';
import { switchMap } from 'rxjs/operators';
import { Observable,of,Subscription } from 'rxjs';
import { Injectable,OnDestroy } from '@angular/core';

export interface AuthStateModel {
  profile: Profile | null;
  loaded: boolean;
}
@State<AuthStateModel>({
  name: 'auth',defaults: {
    profile: null,loaded: false,},})
@Injectable()
export class AuthState implements NgxsOnInit,OnDestroy {
  private profileSubscription: Subscription;

  constructor(private angularFireAuth: AngularFireAuth,private angularFireStore: AngularFirestore) {}

  ngOnDestroy(): void {
    //some cleaning
  }

  ngxsOnInit(ctx?: StateContext<any>) {
    //Some init
  }

    /// Some actions...
}

但是现在在我的app.component.ts中，我正在努力选择。

据他们说，我应该可以做类似的事情：

@Select(AuthState.profile.displayName) name$: Observable<string>;

但是VS Code说（就我所见，我同意），AuthState上没有“配置文件”，这是正确的，因为该属性存在于AuthModel上。

我已经看到了紧随其后的记忆选择器，但这并不是重点。另外，我尝试制作一个返回Profile的文件，然后仅使用AuthState.Profile.displayName，但在displayName上使用相同的结果。

我想念什么？

解决方法

要仅选择状态的profile部分，最简单/最简单的方法是定义选择器

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

然后您可以通过示例@Select(AuthState.profile)

中的静态引用在组件中使用它

或者，您可以直接@Select(state => state.profile.displayName)，或创建一个可观察项目来投影所需的内容：

@Select(AuthState) authState$: Observable<AuthStateModel>;

displayName$: Observable<string>;

ngOnInit(): void { 

  this.displayName$ = this.authState$.pipe(
    filter(state => !!state.profile),map(state => state.profile.displayName),);
}