Question

我有两个组件，一个称为encours.component，第二个称为effecter.component

我尝试通过服务将数据从encours.component传递给第二个组件，但是当我调用服务以检索第二个组件中的数据时，总是得到初始数据，而不是实际的数据，就像我想要的那样< / p>

首先，这是我的data.service.ts文件：

export class DataService{

  private serviceSource = new BehaviorSubject(3);
  currentService = this.serviceSource.asObservable();

  private affaireSource = new BehaviorSubject("eee");
  currentAffaire = this.affaireSource.asObservable();

  constructor(){}

  changeService(service: number){
    this.serviceSource.next(service);
  }

  changeAffaire(affaire : string){
    this.affaireSource.next(affaire);
  }

}

第二，这是我的EncoursComponent文件：

export class EncoursComponent implements OnInit, OnChanges{

//Fonction qui permet de dessiner les lignes et les points
  draw(id: any, events: any, options: any) {

 var svg = d3.select(id).append('svg').attr("width", cfg.width).attr("height", cfg.height);

 svg.selectAll("circle")
      .data(events).enter()

//Lorsqu'on clique sur 1 point
      .on("click", function(d: any) {
        var data : DataService = new DataService();
        var af : any;
        //data.currentAffaire.subscribe(affaire => af = affaire);
        var select = document.getElementById("service") as HTMLSelectElement;
        var choice = select.selectedIndex;
        var service = select.options[choice].value;
        data.changeService(d.affaire);
        data.currentService.subscribe(affaire => d.affaire = affaire);
        self.location.href = 'affecter/' + service + '/' + d.operateur + '/' + d.affaire;
      });

最后，我要在这里获取新数据：

export class AffecterComponent implements OnInit {


  constructor(private data : DataService) {}

  ngOnInit() {
//Here, I only get "eee"
    this.data.currentAffaire.subscribe(affaire => console.log(affaire));
  }

编辑1：

我已经更改了我的代理来源属性，并使其成为一个主题，例如：

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

@Injectable()
export class DataService{

  private serviceSource = new BehaviorSubject(3);
  currentService = this.serviceSource.asObservable();

  public affaireSource = new Subject();
  currentAffaire = this.affaireSource.asObservable();

  constructor(){}

  changeService(service: number){
    this.serviceSource.next(service);
  }

  changeAffaire(affaire : number){
    this.affaireSource.next(affaire);
  }

}

现在，如果我这样做：

export class EncoursComponent{

//Fonction qui permet de dessiner les lignes et les points
  draw(id: any, events: any, options: any) {

 var svg = d3.select(id).append('svg').attr("width", cfg.width).attr("height", cfg.height);

 svg.selectAll("circle")
      .data(events).enter()

//Lorsqu'on clique sur 1 point
      .on("click", function(d: any) {
        var data : DataService = new DataService();
    data.affaireSource.next(d.affaire);
    data.affaireSource.asObservable().subscribe(affaire => console.log(affaire));
    data.currentAffaire.subscribe(affaire =>console.log(affaire));
      });

这对我没有任何帮助。

Answer 1

BehaviourSubject首次订阅时将返回初始值。如果您不希望出现这种情况，则可以使用Subject代替，它也可以从rxjs导入。

Answer 2

使用新主题将解决您的问题。 behaviorSubject比您第一次订阅他时每次都会发出初始值。使用方法next（）发射的主题发射值

将数据从一个组件传递到另一个组件

2 个答案: