Angular 在两个页面/选项卡之间共享数据2

我有两个不同的页面发送者和接收者，在两个不同的选项卡中打开

i、 e浏览器的一个选项卡具有

i、 eborwser的第二个选项卡具有

接收器.组件.ts

此组件将检测/同步将由第二个页面/选项卡应用的更改，即它将基于布尔属性OnMain

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


    })

export class AppComponent implements OnInit {
  onMain: Boolean;

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



    ngOnInit() {
    this.subscription = this.ss.getMessage()
      .subscribe(item => this.onMain=item);
  }

}

从'angular2/CORE'导入{Component，bind，CORE_指令，OnInit}；
从'src/MainComponent'导入{MainComponent}；
从'src/shared.service'导入{SharedService}；
@组成部分({
选择器：“我的应用程序”，
指令：[主组件]，
模板：`AppComponent{{onMain}}
你好

如果为false，则显示此内容

})
导出类AppComponent实现OnInit{
onMain：布尔；
构造函数（ss:SharedService）{
this.onMain=false；
this.ss=ss；
}
恩戈尼尼特（）{
this.subscription=this.ss.getMessage（）
.subscribe（item=>this.onMain=item）；
}
}

sender.component.ts

包含发件人组件的页面/选项卡想要更改第一个页面/选项卡的内容

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

    template: `<h1> Sencond Page Component</h1>
    <button (click)="changeFirstPageMenu()">Hide Menu</button>
    `
})

export class MainComponent {



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

    changeFirstPageMenu() {
      this.ss.sendMessage(true);
    }
}

从'angular2/CORE'导入{Component，bind，CORE_指令}；
从'src/shared.service'导入{SharedService}；
@组成部分({
选择器：“主应用程序”，
模板：`Sencond页面组件
隐藏菜单
`
})
导出类主组件{
构造函数（ss:SharedService）{
this.ss=ss；
}
changeFirstPageMenu（）{
此.ss.sendMessage（true）；
}
}

数据服务.ts 这是一个共享服务，其数据必须通过一个页面进行更改，并且更改将同步到另一个页面（即接收方）

从'rxjs/Subject'导入{Subject}；
@可注射（）
出口级着陆服务{
私有主体=新主体（）；
sendMessage（消息：任意）{
this.subject.next（{text:message}）；
}
clearMessage（）{
this.subject.next（）；
}
getMessage（）：可观察{
返回此.subject.asObservable（）；
}
}

---

现在的问题是组件加载在浏览器的两个不同选项卡/页面上，这两个选项卡/页面没有关系，它们声明了自己的实例，因此任何服务（主题、行为），观察者无法在这两个选项卡之间共享数据，因此如何在两个页面之间共享数据，并且更改必须同步或反映在接收方页面上

您可以随时ping到后端服务以获取最新更新的数据

假设您更新了第一个选项卡中的数据，并希望它位于另一个选项卡中。当您打开第二个选项卡（即焦点第二个选项卡）时，您会发出一次后端请求（调用服务），以便它在第二个选项卡上获取从第一个选项卡更新的最新数据

您将获得许多帖子来观察tab焦点事件

---

我想这个问题与

       import { Subject } from 'rxjs/Subject';

@Injectable()
export class LandingService {
    private subject = new Subject<any>();

    sendMessage(message: any) {
        this.subject.next({ text: message });

    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}