Angular6

Question

所以我正在制作一个 Angular 应用程序，并且有一次我想存储一个用户变量（我从对 Firestore Cloud 的异步调用中获得），该变量确实已设置（使用 console.log()) 但是当我切换页面并尝试在 Firestore 上加载该用户的食谱时，它说我的用户变量未定义。

有更好的方法吗？

谢谢

编辑：代码

tryConnect(email: string, password: string) {
// u = array of users
this.usersWithId.subscribe(u => {
  for (const a of u) {
    console.log(a);
    if (a.email === email && a.password === password) {
      this.connectedUser = a;
      console.log(this.connectedUser);
      break;
    }
  }
});

}

addRecipe(recipe: Recipe) {
console.log(this.connectedUser);
this.db.collection('/recipes').add({
  name: recipe.name,
  description: recipe.description,
  meal: recipe.meal,
  steps: recipe.steps,
  servings: recipe.servings,
  cuisine: recipe.cuisine,
  userID: this.connectedUser.userID,
  ingredients: recipe.ingredients
});

Answer 1

你想做的事情应该通过 rxjs/store 或类似的方式实现。 Rxjs/store 是一个状态管理系统，您可以在应用中存储任何内容，并且在您使用它的任何地方都会保持最新状态。

另外一个选项是使用 sessionStorage 或 localStorage 如果你想在会话中保存它。

Answer 2

我建议你使用 @angular/fire，如果你还没有使用的话。

以下是您可以如何利用 @angular/fire 来实现您的目标。

AngularFireAuth 当作为依赖注入时有一个 authState 类型 Observable<firebase.User>。这基本上具有您当前登录用户的状态。

现在，在您的服务中，您可以创建一个私有 BehaviorSubject<Observable<firebase.User>>，一旦您的 authState 发生变化，next 就会被调用。

然后您可以公开此 BehaviourSubject<firebase.User> asObservable。这个 Observable 是 public，任何将您的服务作为依赖项注入的人都可以访问 user$ 并订阅它以获取当前登录用户的状态。

代码如下所示：

import { AngularFireAuth } from '@angular/fire/auth';
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { User } from '@app/shared/models/user.model';

@Injectable()
export class AuthService {

  private user: BehaviorSubject<Observable<firebase.User>> = new BehaviorSubject<Observable<firebase.User>>(null);
  user$ = this.user.asObservable().pipe(switchMap(user => user));

  constructor(
    private afAuth: AngularFireAuth
  ) {
    this.user.next(this.afAuth.authState);
  }

  loginViaCredentails(user: User) {
    return this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
  }

  ...

}

Angular6 - 将用户变量存储在服务中并在未定义的情况下从其他组件访问它？

Angular6 - Store a user variable in a service and access it from other components without it being undefined?

webstorm

typescript

angular

google-cloud-firestore