Угловая услуга вызова 2 только при инициализации приложения

Question

То, что я пытаюсь выполнить, - вызывать внешний API только один раз для каждой инициализации приложения.

У меня есть простой сервис,

@Injectable() 
export class XService { 
    url = "http://api.example.com" 
    constructor(private _http:Http) { 

    } 

    callAnAPI(){ 
     console.log('made an external request"); 
     return this._http.get(url) 
      .map(res=>res.json()); 
    } 
} 

и два компонента, основной appComponent

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     Test 
    </div> 
    ` 
}) 

export class AppComponent { 
    isLoading = true; 
    results = []; 

    constructor(private _service: XService){ 

    } 

    ngOnInit(){ 
     Observable.forkJoin(
      this._service.callAnAPI() 
      // some more services here 
     ) 
     .subscribe(
      res => { 
       this.results = res[0]; 
      }, 
      null, 
      () => {this.isLoading = false} 
     ); 
    } 
} 

и другой компонент, используемый с маршрутом

@Component({ 
    template: ` 
    <div> 
     I want to use the service with this component. 
    </div> 
    ` 
}) 

export class SecondComponent { 

    constructor(private _service: XService){ 

    } 
} 

инициализации службы и Угловой сервер хитов на инициализацию AppComponent. Я хочу использовать XService с SecondComponent тоже, когда я попытаюсь позвонить услуге снова с SecondComponent, (через _service._service.callAnAPI()) Угловые удары по внешнему API. Я хочу свести к минимуму внешние удары.

Как получить данные, сделанные AppComponent инициализации, чем вызов снова услугу снова в SecondComponent

Answer 1

Вы можете использовать оператор do для этого, чтобы получить данные в первый раз и повторно использовать их для следующие вызовы:

@Injectable() 
export class XService { 
    url = "http://api.example.com" 
    constructor(private _http:Http) { 

    } 

    callAnAPI(){ 
    console.log('made an external request"); 
    if (this.cachedData) { 
     return Observable.of(this.cachedData); 
    } else { 
     return this._http.get(url) 
     .map(res=>res.json()) 
     .do((data) => { 
      this.cachedData = data; 
     }); 
    } 
    } 
} 

Если вы хотите загрузить данные, как запуск, вы можете вызвать метод callAnAPI из конструктора службы.

Чтобы иметь возможность использовать этот подход, вам необходимо определить вашу службу, когда развернув приложение:

bootstrap(AppComponent, [ XService ]); 

Таким образом, вы будете использовать один экземпляр для всего приложения.

Answer 2

@Injectable() 
export class XService { 
    url = "http://api.example.com" 
    constructor(private _http:Http) { 

    } 

    callAnAPI(){ 
     if(this.data) { 
     return Observable.of(this.data); 
     } else { 
     console.log('made an external request"); 
     return this._http.get(url) 
      .map(res=>res.json()) 
      .do(res => this.data = res); 
     } 
    } 
}