Pass data from one component to another

Question

I have two components, one called encours.component and the second called affecter.component

I try to pass data from encours.component to the seconde one with a service, but when I call the service to retrieve the data in the second component, I always get initial data and not the actual data, like I want

So first, this is my data.service.ts file :

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

}

Secondly, this is my EncoursComponent file :

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

And to finish, here is where I want to get my new data :

export class AffecterComponent implements OnInit {


  constructor(private data : DataService) {}

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

EDIT 1 :

I have changed my affaire source property and make it a subject, like this :

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

}

And now,if I do this :

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

And this log me nothing.

Answer 1

BehaviourSubject will return initial values when it is first subscribed. If you dont want this behavior, you can use Subject instead which can be imported from rxjs as well.

Answer 2

use new Subject will resolve your trouble. behaviorSubject emit initial value everytime than you first subscribe him. subject emit value which you emit use method next()