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

我有两个组件，一个叫做encours.component，另一个叫做affecter.component

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

首先，这是我的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);
  }

}

其次，这是我的EnoursComponent文件：

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:

我已更改affaire source属性，并将其作为主题，如下所示：

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

---

此日志不记录任何内容。

behavior subject

将在首次订阅时返回初始值。如果您不想要这种行为，您可以使用

Subject

，它也可以从rxjs导入

behavior subject

将在首次订阅时返回初始值。如果您不想要这种行为，您可以使用

Subject

，它也可以从rxjs导入

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

我尝试过这个方法，但是当它没有在affecter.component中为我记录任何内容时。我尝试过这个方法，但是当它没有在affecter.component中为我记录任何内容时。@maximelza第一次向subject

serviceSource.next（'foo'）发出一些值

@NikolaStekovic因此，如果我将affaireSource声明为主题，并在第一个组件中调用函数data.changeaffire（d.affaire）和this.data.currentaffire.subscribe（affaire=>console.log（affaire））；在我的第二个组件中，它必须返回一些东西给我？因为现在它什么也不返回。@MaximeAlza它将第一次向subject

serviceSource发出一些值。下一次（'foo'）

@NikolaStekovic所以如果我将affaireSource声明为subject，并在我的第一个组件中调用函数data.changeaffire（d.affaire）和this.data.currentaffire.subscribe（afire=>console.log（affaire））；在我的第二个组件中，它必须返回一些东西给我？因为现在它什么也没给我。