您如何在Angular2中的两个浏览器选项卡之间同步数据

Question

我当前被困在我有3种不同组件的情况下，其中一个在两个两个组件之间共享，并且如果我从我想要的两个组件中更新共享的组件要更新他们两个

ist-component

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

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

共享-Component

      import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
@Component({
    selector: 'app-share',
    template: `{{count}}`
})
export class ShareComponent {
   count:any;

}

现在，两个组件都在加载在不同路由上的位置，即使用两个选项卡的浏览器一个选项卡具有第一个组件，第二个选项卡具有第二个组件，因此，如果我更新第二个组件，现在我想要两个组件之间的同步必须反思第一个

Answer 1

使用其他两个组件的"共享组件"只能共享代码，而不是数据。IE。将创建两个"共享组件"的实例化，每个实例都有其自己的一组变量。因此，对一个组件中数据的更新不会反映在另一个组件中。这是设计。

如果您需要在之间共享数据，则需要使用可观察到的两个组件。您需要创建一个服务，该服务将通过声明可观察到的可观察到共享数据。所有需要访问该共享数据的组件都必须订阅服务中可观察到的。