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

Question

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

这是我的工作范例.

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrotherComponent} from './brother.component'
import {SisterComponent} from './sister.component'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule, ReactiveFormsModule} from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <brother (onChange)="handleBrotherEvent($event)" [dataFromSister]="dataFromSister"></brother>
      <sister (onChange)="handleSisterEvent($event)" [dataFromBrother]="dataFromBrother"></sister>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

  handleBrotherEvent(data)
  {
    this.dataFromBrother = data;
    console.log("called from handleBrotherEvent in app", data); 
  }

  handleSisterEvent(data)
  {
    this.dataFromSister = data;
    console.log("called from sister handleSisterEvent in app", data); 
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App, BrotherComponent, SisterComponent ],
  bootstrap: [ App ]
})
export class AppModule {
}

现在我想了解服务,看看如何通过它分享我的数据.我试图查看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来广播对服务中状态的更改.例如

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