Service Angular 2,一次性从服务器加载数据并将结果共享给组件的最佳实践

Service Angular 2,一次性从服务器加载数据并将结果共享给组件的最佳实践,service,angular,Service,Angular,使用服务在Angular 2应用程序中存储(和共享)初始值的最佳实践是什么? 我有一个服务,它从服务器加载大量数据,如资源、配置和其他数组和对象。 我不希望每次加载组件或路由到视图时都加载此数据,我只希望在应用程序启动时使用已加载的这些对象和数组,并根据需要选择重新加载。 问题是存储这些值的正确位置在哪里,以及如何在使用该服务的组件之间共享这些值? 谢谢。正确的地点绝对是服务。如果仅在一个位置将此服务添加为提供者,则整个应用程序将共享一个实例。如果您将其添加到每个组件的提供程序中,每个组件都会获

使用服务在Angular 2应用程序中存储(和共享)初始值的最佳实践是什么? 我有一个服务,它从服务器加载大量数据,如资源、配置和其他数组和对象。 我不希望每次加载组件或路由到视图时都加载此数据,我只希望在应用程序启动时使用已加载的这些对象和数组,并根据需要选择重新加载。 问题是存储这些值的正确位置在哪里,以及如何在使用该服务的组件之间共享这些值?
谢谢。

正确的地点绝对是服务。如果仅在一个位置将此服务添加为提供者,则整个应用程序将共享一个实例。如果您将其添加到每个组件的提供程序中,每个组件都会获得自己的实例,这是您想要避免的

bootstrap(AppComponent,[HTTP_PROVIDERS,MyService]);
@组件({
选择器:“某个comp”,
提供者:[/*不要在此处添加MyService!!*/]})
类MyComponent{}

关于共享服务,冈特完全正确

以下是HTTP的更多详细信息,该HTTP依赖于下一次调用的可观察数据和缓存数据:

export class SharedService {
  constructor(private http:Http) {
  }

  getData() {
    if (this.cachedData) {
      return Observable.of(this.cachedData);
    } else {
      return this.http.get(...)
            .map(res => res.json())
            .do((data) => {
              this.cachedData = data;
            });
    }
  }
}

您必须考虑共享服务,并确保组件之间只共享单个实例。

注意:
不要忘记在引导功能中注册服务。深入观察代码。你会得到你想要的。布线部分未演示。Surf plunk用于进一步实施

服务.ts

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Router} from 'angular2/router';
import {Http} from 'angular2/http';


export interface Info {
   name:string;
}

@Injectable()
export class NameService {

  constructor(http:Http;router:Router)
  {
    this.http=http;
    // you can call server resource from here and store it down to any variable. 
  }

  info: Info = { name : "Jack" };
  change(){
    this.info.name = "Jane"; // this.info is shared among components.

  }
} 

您的实现非常有趣!所以所有组件都可以使用“订阅”功能来加载新的或缓存的数据,对吗?非常感谢,没错。它对订户是完全透明的;-)不客气!我正在尝试实现这个结构,我唯一的疑问是,我的API返回一个对象数组,但在我的“GetData”中,我只想返回一个对象(例如,与某个索引匹配的对象),并且在服务器返回新的对象数组时(例如,在服务内部的“重新加载”函数之后),将关于该对象的更改传播到每个组件. 你有什么建议来实现这个结果吗?再次感谢您的时间。@MassimoMagliani,在您的服务中创建一个observable(与http.get()返回的observable无关的新observable),并让您的组件订阅它。每当您发出服务器请求,然后从服务器获取数据时,将新数据推送到该可观察对象中:
\u observer.next(newData)
。有关示例,请参见。由于您有多个订阅者,您可能还需要
share()。请参阅。@ThierryTemplier,这并不能解释当数据未缓存时几乎同时发生的两个调用,对吗?只向树中需要它的最高组件提供服务不是更好吗?如果只有一个组件需要服务,那么不相关的组件就不知道您新创建的服务。在注入服务的每个组件上提供服务只是最常见的错误之一,即使需要共享instamce,因此,我建议在一个组件上提供数据时有点谨慎。@GünterZöchbauer您能提供一个示例来共享来自基本组件的数据吗。@VinaySingh基本组件是什么意思?请提供有关您的用例的更多信息。也许最好创建一个新问题,详细说明您的需求。@GünterZöchbauer谢谢!我引用了你和他们的irry Templier的答案(这个问题和其他一些问题);