2 angular2의 두 브라우저 탭간에 데이터를 어떻게 동기화합니까?

Question

나는 현재 3 개의 다른 구성 요소가 있고 그 중 하나가 2 개의 두 구성 요소 사이에서 공유되는 상황에 빠져 있습니다. 두 구성 요소 중 하나에서 공유 구성 요소를 업데이트하면 둘 모두에서 업데이트되도록하고 싶습니다. 할 수있는 방법?

IST 성분

 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 성분

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

공유 성분

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

    template: `{{count}}` 
}) 

export class ShareComponent { 

    count:any; 

}

두 가지 구성 요소가 서로 다른 경로에로드됩니다. 예 : 두 개의 탭이있는 브라우저 한 탭에 첫 번째 구성 요소가 있고 두 번째 탭에 두 번째 구성 요소가 있습니다. 두 번째 구성 요소를 업데이트하면 두 구성 요소간에 동기화가 필요합니다. 첫 번째 내용을 반영해야합니다.

Answer 1

다른 두 구성 요소의 "공유 구성 요소"를 사용하면 데이터가 아닌 코드 만 공유됩니다. 나는. "공유 구성 요소"의 두 인스턴스가 만들어지며 각 인스턴스에는 고유 한 변수 집합이 있습니다. 따라서 한 구성 요소의 데이터에 대한 업데이트는 다른 구성 요소에 반영되지 않습니다. 이는 의도적으로 설계된 동작입니다.

사이의 데이터를 공유해야하는 경우 두 가지 구성 요소 인 Observables를 사용해야합니다 (). Observable을 선언하여 공유 데이터를 소유하게 될 서비스를 생성해야합니다. 공유 데이터에 액세스해야하는 다른 모든 구성 요소는 서비스 내 관찰 가능 항목을 구독해야합니다.