CODEWITHSUNDEEP
htmlangulartypescriptrxjs
Flavio Cannavò
Flavio Cannavò

Reputation: 59

Angular 4 BehaviorSubject doesn't multicast properly

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 ...

Upvotes: 2

Views: 569

Answers (1)

AVJT82
AVJT82

Reputation: 73357

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!

Upvotes: 3

Related Questions