Angular 4 BehaviorSubject无法正确多播

Question

I have a service who save user object received from the server. I want my navbar hide the "login" button when user is stored (and show it when user is dropped). I wrote a service which should notify all the component subscripted

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Subject } from 'rxjs/Subject'; import { User } from '../models/user'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class MessageService { user: User; subject = new BehaviorSubject(this.user); setUser() { console.log('setting user...') try { var user = JSON.parse(localStorage.getItem('currentUser')); this.subject.next(user); console.log('setted' + JSON.stringify(user)); } catch (error) { console.log(error); this.subject.next(null); } } unsetUser(){ console.log("Current user was' " + this.subject); localStorage.removeItem('userToken'); localStorage.removeItem('currentUser'); this.subject.next(null); } } 

and the navbar component who subscribes to him

 import { Component } from '@angular/core'; import { User } from '../models/user'; import { Subscription } from 'rxjs/Subscription'; import { MessageService } from '../services/message.service'; @Component({ selector: 'nav-comp', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'], providers: [ MessageService], }) export class NavComponent { public currentUser: User; subscription: Subscription; constructor( private messageService: MessageService, ) { this.subscription = messageService.subject.subscribe({ next: (User) => this.currentUser = User }); console.log('received: ' + this.currentUser); } quit() { console.log("performing logout..."); this.messageService.unsetUser(); } } 

 <nav class="white" role="navigation"> <div class="nav-wrapper container"> <ul class="left hide-on-med-and-down"> <li><a routerLink="/home" routerLinkActive="active" id="logo-container" href="#" class="brand-logo">Skoob</a></li> </ul> <ul class="right hide-on-med-and-down"> <li *ngIf="currentUser==null"><a class=" btn-flat" routerLink="/signup" routerLinkActive="active">registrati </a></li> <li *ngIf="currentUser==null"><a class=" btn-flat" routerLink="/login" routerLinkActive="active">accedi</a></li> <li *ngIf="currentUser!=null"><a class=" btn-flat" (click)="this.quit()" routerLinkActive="active">logout</a></li> <li *ngIf="currentUser!=null"><a class="btn-flat">dashboard</a></li> </ul> <ul id="nav-mobile" class="side-nav cyan"> <li><a class=" btn">Button <i class="material-icons right">cloud</i></a></li> </ul> <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> </div> </nav> 

navbar receives only undefined, when starts, but nothing more

UPDATE: if i check this.subject.value it has the correct value, but navbar doesn't know ...

Answer 1

The issue is, that you are providing the service at component level:

@Component({
  selector: 'nav-comp',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css'],
  providers: [ MessageService], // here!
})

This means that this component has it's own instance of the service. So it's not a shared service at all. That is why your component only gets the initial value of user , which is undefined , but that value never changes again, since this is a totally separate service instance.

To actually have a shared service, you need to provide the service at module level:

@NgModule({
....
providers: [MessageService]
})

and remove all providers arrays from components!