angular - 在两个页面/选项卡之间共享数据

Question

我有两个不同的页面发送者和接收者，并且在两个不同的标签

中打开

即浏览器的一个选项卡有 http://localhost:4200/sender

即浏览器的第二个标签有 http://localhost:4200/receiver

receiver.component.ts

此组件将检测/同步将由第二个页面/选项卡应用的更改，即它将根据 bool 属性 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);
  }

}

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

数据服务.ts 这是一个共享服务，其中的数据必须由一个页面更改，更改将同步到另一个页面(即接收方)

       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();
    }
}

现在的问题是组件被加载到浏览器的两个不同的选项卡/页面上，这两个选项卡/页面没有任何关系，它们有自己声明的实例，因此任何服务(subject,behaviour),observers 无法在这两个选项卡之间共享数据，所以我如何在两个页面之间共享数据，并且更改必须同步或反射(reflect)在接收器上页

Answer 1

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

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

您会收到很多帖子来观察标签页聚焦事件。

http://www.thefutureoftheweb.com/blog/detect-browser-window-focus