html - Angular 4 BehaviorSubject 没有正确多播

Question

我有一项服务可以保存从服务器接收到的用户对象。我希望我的导航栏在存储用户时隐藏“登录”按钮(并在删除用户时显示它)。我写了一个服务，它应该通知所有下标的组件

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

}

以及订阅他的navbar组件

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>

导航栏仅在开始时接收未定义的，但仅此而已

更新:如果我检查 this.subject.value 它具有正确的值，但导航栏不知道 ...

Answer 1

问题是，您在组件级别提供服务:

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

这意味着这个组件有它自己的服务实例。所以它根本不是共享服务。这就是为什么您的组件只获得 user 的初始值，即 undefined，但该值永远不会再更改，因为这是一个完全独立的服务实例。

要真正拥有一个共享服务，您需要在模块级别提供服务:

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

并从组件中删除所有 providers 数组!