如何在 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 {}

第二个组件

          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

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

如果您需要在任何两个组件之间共享数据，您需要使用 Observables。您需要通过声明一个 Observable 来创建一个拥有共享数据的服务。需要访问该共享数据的所有其他组件必须订阅服务中的 observable。