如何从 Angular 中的 BehaviorSubject 中提取值答案

【问题标题】：How to extract values from BehaviouralSubject in Angular如何从 Angular 中的 BehaviorSubject 中提取值
【发布时间】：2019-07-17 10:49:33
【问题描述】：

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

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

帐户服务...

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() 返回一个对象，但我如何检索变量，并在控制器中使用它们，因为它们是 observable 类型的？

【问题讨论】：

this.username$.subscribe(value => { console.log(value) });
this.loginStatus$.getValue() 和 this.username$.getValue() 可以解决问题，或者只是 this.loginStatus$.value 和 this.username$.value
是的，这应该可以。这里是相应文档的链接：github.com/Reactive-Extensions/RxJS/blob/master/doc/api/…

标签： javascript angular rxjs observable

【解决方案1】：

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

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

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

// Update the BehaviourSubject

sourceSubject.next(newValue);

【讨论】：

行为主体已经是 observable，不需要用 asObservable 创建新的 observable
如果此代码在服务中，最好使用此类代码。然后将 Subject/BehaviorSubject 标记为私有，将 Observable 标记为公共，以便组件代码可以访问 Observable，但不能直接向流中注入信息。

【解决方案2】：

您需要 subscribe 到 observable 以从中获取价值：

this.loginStatus$.subscribe(value => {
   console.log(value); // access value
});

【讨论】：

【解决方案3】：

试试这个：

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

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

【讨论】：

【解决方案4】：

这也应该有效：

  ngOnInit() {
   this.loginStatus$ = this.acc.isLoggedIn.pipe(
     tap(status => console.log(status))
   );
   this.username$ = this.acc.currentUserName.pipe(
     tap(userName => console.log(userName))
   );

  }

假设您在某处订阅，例如使用异步管道。

【讨论】：