如何使用 angular2 更新所有组件中的更新服务值

Question

我们有两个组件共享相同的服务，我们更改了一个组件中的服务值，该值我也需要更新其他组件。

app.component.ts

import { Component } from '@angular/core';
import {ConfigurationService} from './first.servvice';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers : [ConfigurationService]
})
export class AppComponent {
  title : boolean;
  constructor(private configurationService:ConfigurationService){
    this.title = this.configurationService.toggle;
  }


}



@Component({
  selector: 'app-root1',
  templateUrl: './app.component1.html',
   providers : [ConfigurationService]
})
export class AppComponent1 {
  title : boolean;
  constructor(private configurationService:ConfigurationService){
      this.title = this.configurationService.toggle;
  }
  change(){
    this.configurationService.toggle = ! this.configurationService.toggle;
    this.title = this.configurationService.toggle;
  }
}

服务.ts

import {Injectable} from "@angular/core";

@Injectable()
export class ConfigurationService {
 toggle :boolean = false;
}

当我们更新其他组件中的服务值时，我需要更新服务值。

代码：

https://plnkr.co/edit/LtrflSk7bICMC2xmacS5?p=preview

Answer 1

使用 rxjs Subject。在您的服务中，进行以下更改：

import {Subject} from "rxjs";

@Injectable()
export class ConfigurationService {
    toggle: Subject<boolean> = new Subject<boolean>();
}

.. 无论您在哪里使用此服务中的值，请订阅toggle：

this.configurationService.toggle.subscribe(value => this.title = value);

..当你想改变/更新它时，你可以做以下事情：

this.configurationService.toggle.next(!this.configurationService.toggle);

链接到你updated plunker。