时间戳

首页 > 解决方案 > BehaviourSubject.getValue() 返回默认值

javascript - BehaviourSubject.getValue() 返回默认值

问题描述

我对角度相当陌生。我有两个组件，即标题和配置文件组件。标头组件处理登录功能并维护两个信息 - 用户详细信息，它是 json 对象和 isLoggedIn，它是保存当前登录状态的布尔值。个人资料页面的总体布局是-

<header-component>
<profile-component>

现在因为标题组件处理登录。我想避免再次为配置文件组件编写获取 userDetails 和 isLoggedIn 状态的逻辑。所以我决定编写一个名为配置文件服务的共享服务，以便我可以从标题上传 userDetails 和 isLogged 并在配置文件组件中访问该信息。loginlogout 方法中的输入来自标头组件。

共享服务代码 -

import { Injectable } from '@angular/core';
import { HttpService } from './https.service';
import { Observable, BehaviorSubject, of as observableOf } from 'rxjs';
import * as _ from 'lodash';
import { HttpHeaders, HttpParams } from '@angular/common/http';
import { BaseService } from './base.service';

@Injectable()
export class ProfileServices{
    constructor(){};

    userDetailsBS = new BehaviorSubject<any>('original value');
    userDetails= this.userDetailsBS.asObservable();
    isLoggedIn:boolean;

    loginlogout(userDetails:any , isLoggedIn:boolean){
        this.userDetails=userDetails;
        this.userDetailsBS.next(this.userDetails);
        console.log("Value of user details set in profile service",this.userDetails); //debug
        console.log(".getValue() method:",this.userDetailsBS.getValue()); //debug
        this.isLoggedIn=isLoggedIn;
    }

    getUserDetails(){
        
        return this.userDetailsBS.getValue();
    }
    
}

从 header-component.ts 发布登录后，我调用配置文件服务中的 loginlogout 方法来设置值。我还尝试使用 getUserDetails 访问传递给共享服务的值，这表明 userDetails 对象已正确传递给共享服务。

当我尝试从配置文件组件访问数据时出现问题 -

export class ProfileT1Component implements OnInit {
    
    userDetails:any;
    constructor(
        public profileService: ProfileServices){
          this.profileService.userDetails.subscribe((result)=>{
            console.log(result);
            this.userDetails=result;
            console.log("received user details in profile component constructor: ", this.userDetails);
          })
    
      }
    }

结果仍然显示“原始值”而不是更新值。这是完全错误的方法还是我错误地处理了可观察值。帮助将不胜感激。

标签： javascriptangulartypescriptrxjsrxjs-observables

解决方案

您需要对服务进行一些更改才能使其正常工作。添加providedIn: root和删​​除其他模块的所有声明。其次，您不需要this.userDetailsBS.asObservable()并且可以直接在userDetailsBS. 您的代码将如下所示。

服务：

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

    userDetailsBS = new BehaviorSubject<any>('original value');
    isLoggedIn: boolean;

    loginlogout(userDetails: any, isLoggedIn: boolean) {
        this.userDetailsBS.next(userDetails);
        this.isLoggedIn = isLoggedIn;
    }

    getUserDetails() {
        return this.userDetailsBS.getValue();
    }
}

零件：

export class ProfileT1Component implements OnInit {
    userDetails: any;
    constructor(public profileService: ProfileServices) {
        this.profileService.userDetailsBS.subscribe((result) => {
            console.log(result);
            this.userDetails = result;
            console.log('received user details in profile component constructor: ', this.userDetails);
        });
    }
}

推荐阅读