2017-05-03 122 views
2

我有两个不同的页面发送者和接收者,并且在开放在两个不同的突片共享数据两者之间的页面/标签页angular2

一个标签浏览器的具有http://localhost:4200/sender

第二个标签已拥有http://localhost:4200/receiver

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

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

现在的数据共享服务问题是组件被加载到浏览器中的两个不同的选项卡/页,这两个选项卡/页没有关系,他们有自己的实例声明等任何服务(主题,行为),观察家不能分享这两个选项卡之间的数据,以便我如何能共享数据的两个页面之间,并且改变必须是同步或反射的接收器页面上

+0

我想这个问题是类似http://stackoverflow.com/questions/43737772/how-do-you-sync-data-between-two-browser-tabs-in-angular2 –

回答

0

您可以在任何时候ping通你的后端服务,以获取最新的更新数据。

假设你在第一个选项卡更新数据,并且希望它在另一个标签。当您打开第二个选项卡(即集中第二个选项卡),你给后端的请求(呼叫服务)曾经那么它将获取你这是从第一片更新的第二个选项卡上的最新数据。

你会得到很多帖子,观察标签关注事件。

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