Angular - 导航时未定义的firebase用户ID，刷新后返回答案

【问题标题】：Angular - firebase userID undefined when navigating, comes back after refreshingAngular - 导航时未定义的firebase用户ID，刷新后返回
【发布时间】：2020-06-07 09:17:00
【问题描述】：

因此，我的应用旨在根据用户 ID 将对象添加到 firebase 数据库，但仅在我刷新页面时才有效 - 当我通过导航进入页面时，它说我的用户 ID 未定义。

auth.service.ts：

    import { Router } from '@angular/router';
import { User } from './interface/user';
import { Observable, Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';


@Injectable({
  providedIn: 'root'
})
export class AuthService {

  user: Observable<User | null>;
  private logInErrorSubject = new Subject<string>();
  private signUpErrorSubject = new Subject<string>();


  constructor(public afAuth: AngularFireAuth, private router: Router) {
    this.user = this.afAuth.authState;
  }

  getUser(){
    return this.user
  }

  SignUp(email: string, password: string) {
    this.afAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(res => {
        console.log('Succesful Sign Up', res)     
    this.router.navigate(['/welcome']);
      }
      ).catch (error => this.signUpErrorSubject.next(error.message))
    console.log(this.signUpErrorSubject);
  }

  Logout() {
    this.afAuth.auth.signOut();
  }

  login(email: string, password: string) {
    this.afAuth
      .auth.signInWithEmailAndPassword(email, password)
      .then(res => {
        console.log('Succesful Login', res)     
    this.router.navigate(['/welcome']);
      }
      ).catch(error => this.logInErrorSubject.next(error.message));

  }

  public getLoginErrors(): Subject<string> {
    return this.logInErrorSubject;
  }
  public getSignUpErrors(): Subject<string> {
    return this.signUpErrorSubject;
  }
}

温度.组件.ts

    import { AuthService } from './../auth.service';
import { Weather } from './../interface/weather';
import { Observable } from 'rxjs';
import { WeatherService } from './../temp.service';
import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-temperatures',
  templateUrl: './temperatures.component.html',
  styleUrls: ['./temperatures.component.css']
})
export class TemperaturesComponent implements OnInit {


  constructor(private authService: AuthService, private route: ActivatedRoute,
    private weatherservice: WeatherService) {

  }

  userId: string;
  likes = 0;
  temperature;
  image;
  city;
  tempData$: Observable<Weather>;
  errorMessage: string;
  hasError: boolean = false;
  saveBtn: string = "Save";
  addLikes() {
    this.likes++
  }


  saveCity() {
    if(this.userId)
    this.weatherservice.addCity(this.userId, this.city, this.temperature);
  }


  ngOnInit() {
    this.authService.user.subscribe(user => {
      if (user)
        this.userId = user.uid;
    });
    //this.temperature = this.route.snapshot.params.temp;
    this.city = this.route.snapshot.params.city;
    this.tempData$ = this.weatherservice.searchWeatherData(this.city);
    this.tempData$.subscribe(
      data => {
        console.log(data);
        this.temperature = data.temperature;
        this.image = data.image;
      },
      error => {
        console.log(error.message);
        this.hasError = true;
        this.errorMessage = error.message;
      }
    )
  }

}

由于某种原因，我对 userID 的订阅似乎没有按预期工作

提前感谢您的帮助

【问题讨论】：

标签： angular typescript firebase firebase-authentication angularfire2

【解决方案1】：

您有两个服务，一个是 AngularFireAuth，另一个是 AuthService。我不确定 AuthService 内部发生了什么，我认为您可能会检测到身份验证状态更改并通过与后端交互来设置用户对象。

您可能没有同步接收用户对象和导航的点。因此，在您导航到某个页面之前，尚未设置用户。

【讨论】：

【解决方案2】：

我刚刚运行npm update，它成功了。不知道为什么。

【讨论】：