角4 BehaviorSubjectが正しくマルチキャストされない

Question

私は、サーバから受信したユーザオブジェクトを保存するサービスを持っています。私は私のnavbarがユーザーが格納されているときに（そしてユーザーがドロップされたときに表示される）「ログイン」ボタンを隠しておきたい。私は、すべてのコンポーネントが

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); 
 
    } 
 

 
}

を添字通知しなければならないサービスと

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>

ナビゲーションバーに彼に加入しているのみで、未定義受けナビゲーションバーコンポーネントを書きましたいつ起動するか、それ以上何もない

UPDATE： 私はそれthis.subject.valueチェックすると...正しい値を持っていますが、ナビゲーションバーは知りません

Answer 1

問題は、コンポーネントレベルでのサービスを提供していることを、次のとおりです。

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

これは、このコンポーネントが独自のサービスインスタンスを持っていることを意味します。だから、それはまったく共通のサービスではありません。そのため、コンポーネントの初期値は、つまりundefinedになりますが、この値はまったく別のサービスインスタンスであるため、決して再び変更されません。

が実際にがサービスを共有しているために、あなたはモジュールレベルでサービスを提供する必要があります。

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

とコンポーネントからすべてのprovidersのアレイを削除します！