Question

我有两个不同的发件人和收件人页面，并在两个不同的标签中打开

，即一个标签的浏览器 http://localhost:4200/sender

，即 http://localhost:4200/receiver 的 scandir issue with accents in Linux work fine in OSX

receiver.component.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);
  }

}

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

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

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

Answer 1

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

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

您将收到很多帖子来观察以标签为重点的事件。

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

在两页/标签之间共享数据angular2

1 个答案: