Angular2组件无法通过服务中的可观察性进行通信 [英] Angular2 components fail to communicate via observable in a service

问题描述

我正在尝试使组件通过共享服务发送消息，例如在 Sender 组件，该组件调用服务的方法，在该方法中触发事件.还有一个 Receiver 组件，它只是侦听事件.

I'm trying to make components send messages via a shared service, like in a cookbook's "Parent and children communicate via a service" recipe. I have a Sender component that calls a service's method, in which an event is fired. And there's a Receiver component, which's just listens to events.

问题是 Receiver 没有收到事件.这是代码:

The problem is the Receiver doesn't get an event. Here's the code:

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()中看到调试消息，因此该消息将被执行.但是事件消息只是没有被传递.为什么?

When I click the button, I see the debug message from TestService.doFoo(), so it gets executed. But the event message just doesn't get passed. Why?

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

推荐答案

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

This it isn't a shared service. Each component gets it's own instance.

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

If you add the service to the providers list of the component, each component will get a new instance.

如果两次运行 bootstrap()，则会创建两个不共享任何内容的不同Angular应用程序.参见代码的最后几行，无论如何如何建立连接:

If you run bootstrap() twice, you create two distinct Angular applications which don't share anything. See the last lines of the code how to establish the connection anyway:

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

这篇关于Angular2组件无法通过服务中的可观察性进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！