Angular2组件无法通过服务中的可观察项进行通信

Question

我试图让组件通过共享服务发送消息，如cookbook's“父级和子级通过服务通信”配方。我有一个Sender组件，它调用一个服务的方法，在该方法中触发一个事件。还有一个Receiver组件，它只是监听事件。

问题是Receiver没有得到一个事件。下面的代码：

import {bootstrap} from 'angular2/platform/browser' 
import {Injectable, Component} from 'angular2/core'; 

import 'rxjs/Rx'; 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class TestService { 
    private _subject = new Subject<any>(); 
    event$ = this._subject.asObservable(); 

    doFoo() { 
     console.log('Doing foo hard...') 
     this._subject.next('hey'); 
    } 
} 

@Component({ 
    selector: 'receiver-component', 
    template: 'Value is {{ value }}', 
    providers: [ 
     TestService 
    ], 
}) 
export class ReceiverComponent { 
    private value: number = 'nope'; 

    constructor(private service: TestService) { 
     this.service.event$.subscribe(data => this.value = data) 
    } 
} 

@Component({ 
    selector: 'sender-component', 
    template: '<button (click)="fireEvent()">Click me</button>', 
    providers: [ 
     TestService 
    ], 
}) 
export class SenderComponent { 
    constructor (private service: TestService) {} 

    fireEvent() { 
     this.service.doFoo() 
    } 
} 

bootstrap(SenderComponent); 
bootstrap(ReceiverComponent); 

当我按一下按钮，我看到TestService.doFoo()调试消息，所以它得到执行。但事件消息只是没有通过。为什么？

更新：我正在使用angular2@2.0.0-beta.7和rxjs@5.0.0-beta.2。

Answer 1

这不是共享服务。每个组件都有它自己的实例。

如果将服务添加到组件的providers列表中，则每个组件都会得到一个新实例。

如果您两次运行bootstrap()，则会创建两个不共享任何内容的不同Angular应用程序。请参阅代码的最后几行如何建立连接：

import {bootstrap} from 'angular2/platform/browser' 
import {Injectable, Component, provide} from 'angular2/core'; 

import 'rxjs/Rx'; 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class TestService { 
    private _subject = new Subject<any>(); 
    event$ = this._subject.asObservable(); 

    doFoo() { 
     console.log('Doing foo hard...') 
     this._subject.next('hey'); 
    } 
} 

@Component({ 
    selector: 'receiver-component', 
    template: 'Value is {{ value }}', 
// providers: [ 
//  TestService 
// ], 
}) 
export class ReceiverComponent { 
    private value: number = 'nope'; 

    constructor(private service: TestService) { 
     this.service.event$.subscribe(data => this.value = data) 
    } 
} 

@Component({ 
    selector: 'sender-component', 
    template: '<button (click)="fireEvent()">Click me</button>', 
// providers: [ 
//  TestService 
// ], 
}) 
export class SenderComponent { 
    constructor (private service: TestService) {} 

    fireEvent() { 
     this.service.doFoo() 
    } 
} 

sharedService = new TestService(); 
bootstrap(SenderComponent, [provide(TestService, {useValue: sharedService})]); 
bootstrap(ReceiverComponent, [provide(TestService, {useValue: sharedService})]);