Я изучаю 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 на это. Надеюсь, так оно и должно работать.