Comment synchroniser les données entre deux onglets de navigateur dans angular2?

Question

Je suis actuellement coincé dans une situation où j'ai 3 composants différents et l'un d'eux est partagé entre les 2 deux composants et si je mets à jour le composant partagé de l'un des deux composants je veux qu'ils soient mis à jour sur les deux un moyen de faire?

ist composants

 import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core'; 
import {MainComponent} from 'src/MainComponent'; 
@Component({ 
    selector: 'my-app', 
    directives:[MainComponent], 
    template: `<h1>AppComponent {{onMain}}</h1> 
    <div *ngIf="onMain == false"> 
     Hello 
     <br> __________________________________<br> 
    </div> 
    <app-share></app-share> 


    }) 

export class FirstComponent implements OnInit {} 

2 composants

  import {Component,bind,CORE_DIRECTIVES} from 'angular2/core'; 
    import {SharedService} from 'src/shared.service'; 
    @Component({ 
     selector: 'sec-app', 

     template: `<app-share></app-share> 
        <button (click)='changeCount()'></button> 
` 
    }) 

    export class SecondComponent { 



     constructor(ss: SharedService) { 
      this.ss = ss; 
     } 

     changeCount() { 
      //want to change the count of shared component and also want a sync in first componen 
     } 
    } 

-composant partagé

 import {Component,bind,CORE_DIRECTIVES} from 'angular2/core'; 
@Component({ 
    selector: 'app-share', 

    template: `{{count}}` 
}) 

export class ShareComponent { 

    count:any; 

}

Maintenant les deux composants sont chargés sur des routes différentes ie navigateur avec deux onglets un onglet a le premier composant et le deuxième onglet a le deuxième composant, maintenant je veux une synchronisation entre les deux composants si je mets à jour le deuxième composant il doit refléter sur le premier

Answer 1

L'utilisation du "composant partagé" des deux autres composants partagera seulement le code, pas les données. C'est à dire. deux instanciations de "composant partagé" seront créées, chacune avec son propre ensemble de variables. Par conséquent, les mises à jour des données d'un composant ne seront pas reflétées dans l'autre. C'est par conception.

Si vous avez besoin de partager des données entre un deux composants, vous devez utiliser Observables. Vous devez créer un service qui possédera les données partagées en déclarant un Observable. Tous les autres composants qui ont besoin d'accéder à ces données partagées doivent s'abonner à l'observable au sein du service.