如何正确使用服务在组件之间共享数据? [英] How to share data between components using a service properly?

问题描述

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

您将无法使用这种方法检测和响应更改.更健壮的方法是使用可观察对象来广播对服务中状态的更改.例如

从rxjs/BehaviorSubject"导入{BehaviorSubject}导出类 MyService {私有状态$ = new BehaviorSubject('initialState');更改状态(我的更改){this.state$.next(myChange);}获取状态(){返回 this.state$.asObservable();}}

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

I am learning angular2 and was able to share data between sibling components using input/output.

Here is my working example.

//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 {
}

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?

Update:

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();
    }
}

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屋！