如何正确使用服务在组件之间共享数据？

Question

我正在学习angular2，并且能够使用输入/输出在兄弟组件之间共享数据。

Here是我的工作范例。

p4 change -d

现在我想了解服务并了解如何通过它分享我的数据。我试图查看angular.io文档以了解使用服务的组件之间的通信，但我仍然对如何使用我的示例感到困惑。这是我一直在阅读的部分：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

我正在寻找一个具体示例，将我的原始示例转换为使用服务共享组件表单数据。有人可以帮助我吗？

更新

根据以下评论，我将我的plnkr更改为此。希望这是它应该如何工作。

http://plnkr.co/edit/zW5c8d1HJQ32qJtCHTTS?p=preview

Answer 1

您始终可以从两个不同的组件创建对服务变量的绑定。在此示例中，一个组件递增一个数字，另一个组件显示值

使用此方法您将无法检测并响应更改。更强大的方法是使用observable来广播对服务中状态的更改。 e.g。

import {BehaviorSubject} from "rxjs/BehaviorSubject"

export class MyService {
    private state$ = new BehaviorSubject<any>('initialState');

    changeState(myChange) {
        this.state$.next(myChange);
    }

    getState() {
        return this.state$.asObservable();
    }
}

然后，您的组件可以订阅状态更改并通过调用服务上的自定义方法来更改状态。我在这里有一个具体的例子https://github.com/robianmcd/ng2-redux-demo/blob/redux-demo-with-service/app/user.service.ts