Angular6-将用户变量存储在服务中并从其他组件访问它,而不会被未定义?

时间:2018-10-14 15:09:09

标签: angular typescript google-cloud-firestore angular6 webstorm

因此,我正在制作一个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
});

2 个答案:

答案 0 :(得分:0)

您想做的事情应该通过words = movies.genres.apply(lambda x: x.str.split('|').str[1]) 或类似的方法来实现。 Rxjs / store是一种状态管理系统,您可以在其中存储应用程序中的任何内容,并且可以随时随地更新其内容。

如果要在整个会话中保存,也可以选择使用rxjs/storesessionStorage

答案 1 :(得分:0)

如果您尚未使用 @angular/fire ,我建议您使用它。

在这里,您可以利用@angular/fire来实现自己的目标。

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

现在,在您的服务中,您可以创建一个私有BehaviorSubject<Observable<firebase.User>>next更改后将立即在其上调用authState

然后可以暴露此BehaviourSubject<firebase.User> asObservable。这个Observable是公开的,只要注入您的服务作为依赖项,就可以访问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);
  }

  ...

}