javascript - 如何从 Angular 中的 BehaviouralSubject 中提取值

Question

我为我的 Angular 应用程序创建了一个帐户服务，它处理登录和注销。这很有效。但我遇到了一个问题，我使用 BehaviourSubject Observables 来渲染变量。

我正在尝试检索登录状态值以及使用该服务的组件上的用户名字符串，但可观察对象返回一个对象，并且我在从对象中提取字符串时遇到问题。如何从 Behavioursubject 可观察量中提取变量类型？

账户服务...

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';


@Injectable({ 
  providedIn: 'root'
})

export class AccountService {
  

  private baseUrlLogin:string = "/api/account/login";

  private loginStatus = new BehaviorSubject<boolean> 
  (this.checkLoginStatus());  
  private userName = new BehaviorSubject<string> localStorage.getItem['username']);

  constructor(
    private http:HttpClient, 
    private router: Router
  ){}

  login(username:string, password:string){
    return this.http.post<any>(this.baseUrlLogin,{username, password}).pipe(
               map(result => {
                  if(result && result.token){
                      localStorage.setItem('loginStatus', '1'); 
                      localStorage.setItem('username', result.username),

                  }
                  return result;
                  
               })
           );

  }

  logout(){
    this.loginStatus.next(false);
    localStorage.setItem('loginStatus', '0');  
    localStorage.removeItem('username'),
    localStorage.clear();

    //now redirect to the login page... 
    this.router.navigate(['/login']);
    console.log("logged out successfully...");
  }

   
  get isLoggedIn(){
    return this.loginStatus.asObservable(); 
  }

  get currentUserName(){
    return this.userName.asObservable();  
  }

}

使用服务的组件

import { Component, Input, OnInit } from '@angular/core';
import { AccountService } from 'src/app/services/account.service';
import { Observable } from 'rxjs';

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

  pgtitle:string = "SCB Dashboard";

  loginStatus$ : Observable<boolean>;
  username$ : Observable<string>;

  constructor(
    private acc:AccountService
  ){}

  ngOnInit() {
   this.loginStatus$ = this.acc.isLoggedIn;
   this.username$ = this.acc.currentUserName;
   

   console.log(this.loginStatus$);  //here it ruturns an object
   console.log(this.username$);   //and here too... 

  }

}

console.log() 返回一个对象，但如何检索变量并在 Controller 中使用它们，因为它们是可观察类型的？

Answer 1

Rxjs BehaviourSubject 有一个 asObservable() 方法，你可以从中生成你的 observable

let sourceSubject = new BehaviourSubject();
let source$ = sourceSubject.asObservable();

source$.subscribe(result => // Your data)

// Update the BehaviourSubject

sourceSubject.next(newValue);