我有两个不同的页面发送者和接收者,并且在开放在两个不同的突片共享数据两者之间的页面/标签页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();
}
}
现在的数据共享服务问题是组件被加载到浏览器中的两个不同的选项卡/页,这两个选项卡/页没有关系,他们有自己的实例声明等任何服务(主题,行为),观察家不能分享这两个选项卡之间的数据,以便我如何能共享数据的两个页面之间,并且改变必须是同步或反射的接收器页面上
我想这个问题是类似http://stackoverflow.com/questions/43737772/how-do-you-sync-data-between-two-browser-tabs-in-angular2 –