Angular 2, лучше всего загружать данные с сервера один раз и делиться результатами с компонентами

Какова наилучшая практика хранения (и совместного использования) начальных значений в приложении Angular 2 с использованием службы? У меня есть служба, которая загружает много данных с сервера в виде ресурсов, конфигураций и других, которые являются массивом и объектами. Я не хочу загружать эти данные каждый раз, когда я загружаю компонент или когда я направляюсь к представлению, я просто хочу использовать эти объекты и массив, уже загруженные при запуске приложения, и при необходимости перезагружать, если это необходимо. Вопрос в том, где правильно хранить эти значения и как делиться между компонентами, использующими эту услугу? Спасибо.

Ответы

Ответ 1

Вы должны подумать о общедоступной службе и убедитесь, что только один отдельный экземпляр разделяется между компонентами.

общая служба и демонстрация общих объектов

Примечание.
не забудьте зарегистрировать услугу в загрузочной функции. Соблюдайте код глубоко. вы получите то, что хотите. Часть маршрутизации не показана. Surf plunk для дальнейшей реализации

service.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.

  }
}

Ответ 2

Gunter совершенно прав в отношении общих сервисов!

Ниже приведена подробная информация о 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;
            });
    }
  }
}

Ответ 3

Правильное место, безусловно, является сервисом. Если вы добавите эту услугу в качестве поставщика только в одном месте, один экземпляр будет совместно использоваться всем приложением. Если вы добавите его поставщикам на каждый компонент, каждый компонент получит свой собственный экземпляр - это то, чего вы хотите избежать.

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);

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