Abonnement au service de partage de données Angular 6 non déclenché

Dans votre cas, vous devez vous abonner à this.valueObs pour ne pas inclure cette méthode, car votre variable valueObs est de type observable, vous pouvez donc vous abonner directement à cela comme ceci -

constructor(private socialService: SocialService, private http: HttpClient) {

  this.socialService.getValue().subscribe(data=>{
    console.log('Trigger from ComponentB');
    console.log(data);
  });
  this.socialService.valueObs.subscribe(data=>{
    console.log('Trigger from ComponentB on Next called');
  });

}

this.socialService.getValue().subscribe(data=>{
    console.log('Trigger from ComponentB');
    console.log(data);
  });

Vous pouvez effectivement utiliser Subject avec le routeur. Donc, Ici est une solution en direct pour votre scénario en utilisant Routeur et Subject .

Votre service contiendra simplement -

this.socialService.getValue().subscribe(data => {
    this.dataFromB = data;
    console.log('Trigger from ComponentB');
    console.log(data);
})

Ensuite, votre ComponentB contiendra -

buttonClick() {
    this.socialService.setValue("linked successfully");
    this.router.navigate(['/a']);
}

Et, le constructeur de votre ComponentA contiendra -

public setValue(value: string): void {
    this.valueObs.next(value);
}

public getValue(): Observable < string > {
    return this.valueObs;
}

Je pense que vous auriez besoin d'un ReplaySubject pour cela. Votre composant qui s'abonne à l'observable s'abonne, une fois la valeur émise et donc l'observable n'émet plus, il n'y a aucune valeur à obtenir de cette observable. Un ReplaySubject prend soin de donner à l'abonné toutes les émissions qui ont eu lieu avant même la fin de l'abonnement.

La solution @Tushar Walzade fonctionne, car les deux composants sont dans le composant d'application, donc les deux observateurs s'abonnent avant que l'événement ne soit émis. (L'abonnement a lieu à l'intérieur du constructeur pour les deux composants, qui est appelé avant de cliquer sur le bouton). Mais si vous avez un module chargé paresseusement par exemple, le seul composant ne sera créé qu'au chargement et vous n'obtiendrez les données que si vous utilisez un ReplaySubject ou l'opérateur rxjs publier ou partager

Regardez ici:

opérateurs de publication et de partage sujets, sujets de comportement et sujets de relecture

Si je ne me trompe pas, ce dont vous avez besoin est soit de souscrire , soit d'utiliser le tube async dans le modèle du composant a afin que vous obteniez toujours la dernière valeur du flux observable.

J'ai créé une application simple pour vous le démontrer.

Disons que nous avons 2 routes, chacune rendant le composant pertinent (a, b).

Nous utilisons un service pour partager des données entre deux composants.

@Component({
  selector: 'b-component',
  template: `Component B <br> 
  <input type="text" placeholder="set data for component a" [(ngModel)]="modifiedData" (ngModelChange)="editServiceData($event)"/>`,
})
export class BComponent  {
  @Input() name: string;
  modifiedData;

  constructor(private myService: MyService) {}

  editServiceData(data: string) {
    this.myService.setValue(data)
  }
}

Ensuite, dans le composant a, nous écoutons les changements du flux observable du service.

@Component({
  selector: 'a-component',
  template: `Component A <br> Data: <pre>{{data}}</pre>`,
})
export class AComponent {
  @Input() name: string;

  data: Observable<string>;

  constructor(private myService: MyService) {
    this.myService.data.subscribe(data => this.data = data);
  }

Le problème est dans votre service. Lorsque vous définissez les données, le sujet a déjà émis la valeur. Faites comme ça.

1. Dans votre service, rendez BehaviorSubject public et vous n'avez plus besoin de la méthode getValue .

2. Dans ComponetA où vous recevez les données de CompoenetB , souscrivez à BehaviorSubject qui est valueObs .

Classe de service modifiée comme suit.

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

@Injectable()
export class SocialService {

  public valueObs: BehaviorSubject<string> = new BehaviorSubject<string>(null);

  constructor() {}

  public setValue(value: string):void {
     this.valueObs.next(value);
     // this.getValue();
  }

 // public getValue():Observable<string> {
 //     return this.valueObs;
 // }
}