1

我正在阅读并尝试 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 上。

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

我错过了什么？

4

1 回答 1

0

要仅选择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),
  );
}
于 2020-10-13T02:48:13.550 回答