可观察值未更新

Question

我正在尝试在Angular中使用一个服务，该服务将应用程序的状态保存在字符串变量中。我使用RxJS来使用BehaviorSubject，然后我的组件订阅了BehaviorSubject的一个observable。

State.Service.ts

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Injectable } from '@angular/core';


@Injectable()
export class StateService {

  private sourceState = new BehaviorSubject<string>('Default State');
  currentState = this.sourceState.asObservable();

  constructor() { }

  setState(state: string) {
    this.sourceState.next(state);
    console.log(this.currentState);
    }
}

我的组件都在NgOnInit生命周期中订阅了这个observable。

Nav.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { StateService } from '../../services/state.service';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { Location } from '@angular/common';

@Component ({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss'],
  providers: [StateService]
})
export class NavComponent implements OnInit {
  currentState: string;

  constructor(
    private authService: AuthService,
    private router: Router,
    private stateService: StateService
  ) {}

  ngOnInit() {
    this.stateService.currentState.subscribe(
      state => (this.currentState = state)
    );
  }

  logout() {
    this.authService.logout();
  }

  changeState(state: string) {
    this.stateService.setState(state);
  }
}

我的应用程序中的其他组件将调用state.service.ts文件中的setState函数。我在模板中绑定状态值只是为了观察值，所以我可以使用指令来根据应用程序状态改变体验。

问题

组件中的值不会改变，即使我在console.log中我可以看到它正确设置。

注意

当我在nav组件中调用setState函数时，我确实看到字符串插值的值发生变化但仅在nav.component.ts中，其他组件不会改变。它几乎就像是使用了可观察的克隆。

nav.component.html

<nav class="navbar" [ngClass]="{red: currentState==='stove'}">
  <a  class="navbar-brand" routerLink="/app">
    <img src="../assets/img/app/back.svg" alt="">
  </a>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" routerLink="/login" (click)="logout()">Logout
        <i class="fa fa-sign-out" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</nav>
{{ currentState }}

Answer 1

问题与此有关，

@Component ({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss'],
  providers: [StateService]
})

您在组件中提供服务，这意味着您没有获得它的单例实例。请检查相关的answer。

您必须使用NgModule提供程序数组，并将其从组件的数组提供程序中删除。

@NgModule({
  ...
  providers: [StateService],
  ...
})