如何使用服务正确地在组件之间共享数据? [英] How to share data between components using a service properly?
问题描述
我正在学习angular2,并且能够使用输入/输出在同级组件之间共享数据.
I am learning angular2 and was able to share data between sibling components using input/output.
此处是我的工作示例.
//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文档,以了解使用服务的组件之间的通信,但是对于如何使该示例与我的示例结合使用,我仍然感到困惑.这是我正在阅读的部分:
Now I want to learn about services and see how I can share my data through that. I have tried to look at the angular.io documentation to understand communication between components using a service, but I am still confused on how to get this working with my example. Here is the section I have been reading:
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
我正在寻找一个具体的示例,以将我的原始示例转换为使用服务共享组件表单数据.有没有人可以帮助我?
I am looking for a concrete example to convert my original example to share component form data using a service. Is there somebody that can help me?
更新:
基于以下注释,我将plnkr更改为此.希望这是它应该如何工作的.
Based off the below comments, I changed my plnkr to this. Hopefully this is how its supposed to work.
http://plnkr.co/edit/zW5c8d1HJQ32qJtCHTTS?p=preview
推荐答案
您始终可以仅从两个不同的组件创建到服务上变量的绑定.在此示例中,一个组件递增一个数字,另一个组件显示该值
You can always just create a binding to a variable on a service from two different components. In this example one component increments a number and the other component displays the value
您将无法使用这种方法检测并响应更改.一种更健壮的方法是使用可观察的广播对服务状态的更改.例如
You won't be able to detect and respond to changes with this approach. A more robust approach would be to use an observable to broadcast changes to the state in your service. 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
Then your components could subscribe to state changes and change the state by calling custom methods on the service. I have a concrete example of this approach here https://github.com/robianmcd/ng2-redux-demo/blob/redux-demo-with-service/app/user.service.ts
这篇关于如何使用服务正确地在组件之间共享数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!