使用一个REST调用的Angular2多个组件

Question

I am part of a Angular2 application (we use beta3) and the issue is the following:

Usually we have a component that uses some service that uses some rest call and the component displays the data. Great.

However we do have a page with more then 6 components all of them using the same REST call...(the backend returns data for ALL of them) and it doesn't make sense to call 6 times the REST for each component, also it will be weird if we do some client side caching.

Is there something available out of the box ? Or a Pattern to handle such case?

Thanks.

Answer 1

Just do it in a shared service. If you add it only in bootstrap(..., [OtherProviders, HTTP_PROVIDERS, MyService]) each component will get injected the same instance. Store the data in the service and every component can access it

export class MyComponent {
  constructor(private dataService:MyService) {
    dataService.getData().subscribe(data => { this.data = data; });
  }
}

export class MyService {
  getData() {
    if(!this.data) {
      return http.get(...).map(...).subscribe(data => { this.data = data;});
    } 
    return this.data;
  }
}

Answer 2

The @Günter's answer really makes sense!

I don't know your code is organized but observable can also be subscribed several times. To do that you need to make them "hot" using the share operator:

export class MyService {
  dataObservable:Observable;

  initDataObservable() {
    this.dataObservable = http.get(...).map(...).share();
  } 
}

Without using the share operator, corresponding request will executed several times (one per subscribe).

You can notice that the request will be executed once one subscribe method is called on the observable.