Question

我想将用户状态存储在Angular服务中。所以我得到了这样的代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class UserService {
  private userName = new BehaviorSubject<string>('undefined');
  private userLoggedIn = new BehaviorSubject<boolean>(false);

  public UserName = this.userName.asObservable();
  public UserLoggedIn = this.userLoggedIn.asObservable();

  constructor() { }

  signOut() {
    this.userLoggedIn.next(false);
    this.userName.next('undefined');
  }

  signIn(name) {
    this.userLoggedIn.next(true);
    this.userName.next(name);
  }
}

它运行正常，但每次页面刷新时似乎都会重置userName和userLoggedIn值。所以它最好存储像f.e. Redux确实如此。

我想，我在某个地方犯了一个错误，但却无法得到我做错的事 - 它是我的第一个Angular应用程序（（

Answer 1

为了扩展@ HT89s答案，您可以将状态存储在浏览器中，以便在页面刷新之间保留状态。

constructor() {

   // store in the browser each time a value is emitted to userLoggedIn
   this.userLoggedIn
      .do((loggedIn) => {
         localStorage.setItem('userLoggedIn', loggedIn);
      });

   this.userName
      .do((userName) => {
         localStorage.setItem('userName', userName);
      });
}

但是你也可能希望扩展这种解决方案，以便对登录的到期进行某种检查。

Answer 2

您使用与Observer模式类似的BehaviorSubject，因此通常用于促进单独组件之间的通信。刷新页面后无法保留数据，除非您将用户状态存储在本地存储中，如下所示：

将用户状态存储在本地存储中：

localStorage.setItem('userStatus', JSON.stringify(userStatus));

从本地存储中获取用户状态：

let userStatus = JSON.parse(localStorage.getItem('userStatus'));

如何在Angular应用程序中的rxjs observables中存储状态？

2 个答案: