RxJs BehaviorSubject的订户未收到有关值更改的通知的问题 [英] Issue with RxJs BehaviorSubject's subscriber not being notified of value change

问题描述

我正在尝试使用包含boolean的RxJS BehaviorSubject，该boolean表示用户是否已在应用程序中连接/登录.

I am trying to use a RxJS BehaviorSubject that contains a boolean representing whether or not a user is connected/logged in the application.

这里是订阅新的BehaviorSubject值(即用户已通过身份验证时 true )的组件:

Here is the component that subscribes to the new BehaviorSubject value i.e. true when the user has authenticated:

import {Component, OnInit} from '@angular/core';
import {CollapseDirective} from 'ng2-bootstrap';
import {PublicNavbarComponent} from './public.navbar.component';
import {PrivateNavbarComponent} from './private.navbar.component';
import {SessionService} from '../../session/session.service';

@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/components/navbar.component.html',
    providers: [SessionService],
    directives: [PublicNavbarComponent, PrivateNavbarComponent, CollapseDirective]
})
export class NavbarComponent implements OnInit {

    constructor(private sessionService:SessionService) {
    }

    ngOnInit() {
        this.sessionService.authenticated$.subscribe({
            next: (value)=> this.isAuthenticated = value
        });
    }

    isAuthenticated:boolean = false;

    isCollapsed:boolean = true;
}

以下是包含BehaviorSubject的类/服务:

Here is the class/service containing the BehaviorSubject:

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import {Credentials} from '../shared/models/credentials.model';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import 'rxjs/Rx';

@Injectable()
export class SessionService {

    authenticated$:BehaviorSubject<boolean> = new BehaviorSubject(false);
    currentUserAccount;

    constructor(private http:Http) {
    }

    signin(credentials:Credentials) {
        let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'});
        let options = new RequestOptions({headers: headers});
        this.http.post('/api/signin', 'username=' + credentials.username + '&password=' + credentials.password, options)
            .subscribe(response=>
                this.setPersonalInfo(response.headers.get('x-auth-token'))
            );
    }

    setPersonalInfo(sessionToken) {
        localStorage.setItem('authenticated', 'true');
        localStorage.setItem('sessionToken', sessionToken);
        this.authenticated$.next(true);//next() from false to true
        this.http.get('/api/utils/current-useraccount')
            .subscribe(param => this.currentUserAccount = param);
    }
}

但是，这没有预期的行为:会话服务中的authenticated$仅在setPersonalInfo函数中是正确的，并且在调用this.authenticated$.next(true)时根本没有通知NavbarComponent中的isAuthenticated.

However this does not have the expected behavior: it seems that authenticated$ from session service is only true within setPersonalInfo function and isAuthenticated from NavbarComponent isn't notified at all when this.authenticated$.next(true) is invoked.

推荐答案

似乎您有多个SessionService实例.例如您提供了多次，并且调用signin的实例与您在NavbarComponent中注入的实例不同.

It seems like you have multiple instances of SessionService. e.g. you provided it more than once and the instance that you call signin in is not the same instance as the one you injected in NavbarComponent.

如何提供服务取决于您的项目设计.通常，会话服务为单例.
我建议从NavbarComponent中删除providers: [SessionService],.

It depends on your project design how you provide your services. Usually session services are singletons.
I recommend removing providers: [SessionService], from NavbarComponent.

这篇关于RxJs BehaviorSubject的订户未收到有关值更改的通知的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！