Angular 2，一次从服务器加载数据并将结果共享给组件的最佳实践[重复]

Question

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

Answer 1

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

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);

@Component({
  selector: 'some-comp',
  providers: [/* don't add MyService here !! */]})
class MyComponent {}

Answer 2

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

共享服务和共享对象演示

注意:< br >不要忘记在bootstrap函数中注册服务。深入观察代码。你会得到你想要的。布线部分未演示。冲浪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.

  }
} 

Answer 3

冈特在共享服务方面是完全正确的！

下面是一个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;
            });
    }
  }
}