Как правильно обмениваться данными между компонентами с помощью службы?

Я изучаю 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

Я ищу конкретный пример для преобразования моего первоначального примера для совместного использования данных формы компонента с помощью службы. Есть ли кто-нибудь, кто может мне помочь?

Update:

Основываясь на приведенных ниже комментариях, я изменил свой plnkr на это. Надеюсь, так оно и должно работать.

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

Ответы

Ответ 1

Вы всегда можете просто создать привязку к переменной в службе из двух разных компонентов. В этом примере один компонент увеличивает число, а другой компонент отображает значение

введите описание изображения здесь

Вы не сможете обнаружить и отреагировать на изменения с помощью этого подхода. Более надежный подход заключается в использовании наблюдаемого для трансляции изменений состояния в вашей службе. например.

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