Angular RxJs BehaviorSubject无法正确更新

时间:2018-03-01 00:15:23

标签: angular typescript rxjs

我正在尝试从兄弟组件(灯光切换到导航栏)共享字符串值。我的问题是,当我从DataService发出新值时,属性themeColor没有得到更新。

这是我的App.Component.html的结构:

<navbar></navbar>
<banner><light-switch></light-switch></banner>

我正在尝试使用DataService:

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

@Injectable()
export class DataService {

  private themeColor = new BehaviorSubject<string>("#f5f0f0");
  currentThemeColor = this.themeColor.asObservable();

  constructor() { }

  changeThemeColor(color: string) {
    this.themeColor.next(color)
  }

}

这是我的light-switch.component.ts:

import { Component, OnInit } from '@angular/core';
import {DataService} from "./../Services/DataService";

@Component({
  selector: 'light-switch',
  templateUrl: './light-switch.component.html',
  styleUrls: ['./light-switch.component.scss']
})
export class LightSwitchComponent implements OnInit {
  public currentTheme;
  public themeColor;

  constructor(private sanitization: DomSanitizer, private dataService: DataService) { 
    this.currentTheme = "dark";
    this.themeColor = "#f5f0f0";
  }

  ngOnInit() {
    this.dataService.currentThemeColor.subscribe(color =>{ this.themeColor = color});
  }

  changeToLight(){
    this.dataService.changeThemeColor("black");
  }
  changeToDark(){
    this.dataService.changeThemeColor("#f5f0f0");
  }
}

我的navbar.ts:

import { Component, OnInit } from '@angular/core';
import {DataService} from "./../Services/DataService";

@Component({
  selector: 'navbar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBar implements OnInit {
  private themeColor;
  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.dataService.currentThemeColor.subscribe(color => {this.themeColor = color});
  }
}

NavigationBar.html:

<div class="navbar">
  <i class="fa fa-github bannerIcon" id="githubIcon" [style.color]='themeColor'></i>
  <i class="fa fa-linkedin bannerIcon" id="linkedInIcon" [style.color]='themeColor'></i>
</div>

光switch.html:

<div id="lightSwitch">
  <button class="btn btn-secondary switchBtn-on" (click)="changeToLight()">On</button>
  <button class="btn btn-secondary switchBtn-off">Off</button>
</div>

我在App.Module.ts中将DataService作为提供程序。当ngOnInit在navbar.ts中运行时,它会获得我设置的默认值,当我在light-switch.ts中调用changeThemeColor()时,它会进入DataService.ts并更改{{1另外,navbar.ts中的currentColor属性不会更新到该themeColor属性。我怀疑有一些事件监听器我需要正确地从DataService获取值到导航栏,但我认为这是我订阅的。

3 个答案:

答案 0 :(得分:3)

您的代码看起来基本正确。

您的DataService是否可能未正确注册且您没有获得单身人士?是模块中的DataService的providers数组吗?还是一个组件?或者在多个组件中?

确保服务仅在一个地方注册(添加到提供者数组)。

答案 1 :(得分:1)

1-如果您的数据服务包含在其他模块中,例如:在App模块中导入的共享模块,则尝试在App模块中移动该服务,以便所有组件应共享该服务的一个实例,并可以更新数据状态。

2-如果在组件内部使用它,则仅对该特定组件具有不同的实例。

在两种情况下,实例都不是单例,因此在其他组件/模块中未通知数据状态更新。 对于此问题,您需要具有全局服务实例。因此,将DataService包含在您的App模块提供程序数组中。

答案 2 :(得分:0)

还必须使用

@Injectable({
providedIn: 'root'})

以便在根目录上加载服务。