Wie synchronisieren Sie Daten zwischen zwei Browser-Registerkarten in angular2?

Question

Ich bin derzeit in einer Situation, wo ich 3 verschiedene Komponenten habe und einer von ihnen ist geteilt zwischen den beiden zwei Komponenten und wenn ich gemeinsam genutzte Komponente von einer der beiden Komponenten aktualisieren ich möchte, dass sie auf beiden aktualisiert werden, ist da eine Möglichkeit zu tun?

ist-Komponente

 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 {} 

2nd-Komponente

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

Shared-Komponente

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

    template: `{{count}}` 
}) 

export class ShareComponent { 

    count:any; 

}

Nun sind beide Komponenten auf verschiedenen Routen geladen, dh Browser mit zwei Tabs Ein Tab hat die erste Komponente und der zweite Tab hat die zweite Komponente, also möchte ich jetzt eine Synchronisation zwischen den beiden Komponenten, wenn ich die zweite Komponente aktualisiere es muss die erste

Answer 1

reflektieren Verwenden von "shared component" von den anderen beiden Komponenten wird nur den Code teilen, nicht die Daten. I.e. Es werden zwei Instanzen von "shared component" erstellt, jede mit ihren eigenen Variablen. Daher werden Aktualisierungen der Daten in einer Komponente nicht in der anderen wiedergegeben. Das ist Absicht.

Wenn Sie Daten zwischen zwei Komponenten teilen müssen Sie Observables verwenden. Sie müssen einen Dienst erstellen, der die freigegebenen Daten besitzt, indem Sie ein Observable deklarieren. Alle anderen Komponenten, die Zugriff auf diese freigegebenen Daten benötigen, müssen die Observable innerhalb des Service abonnieren.