Уведомлять компонент, когда сервисная функция завершена в angular

Я пишу службу, которая выполняет http-запрос к серверной части:

getPlacesForUser(){
 this.http.get("http://localhost:8080/processPlaces")
  .map(res => res.text())
  .subscribe(
    data => this.result = data,
    err => this.logError(err),
    () => console.log('Places Request completed')
  )
}

Теперь я хочу обновить компонентную часть, если запрос выполнен:

processPlaces(){
 this._backendService.getPlacesForUser();
}

Как я могу общаться между компонентом и сервисом?

Кроме того, я ищу лучшую практику.


person loose11    schedule 12.01.2016    source источник


Ответы (2)


На самом деле вы можете вернуть обсервбл прямо из метода getPlacesForUser и прикрепить к нему метод подписки.

  • Сервис

    getPlacesForUser(){
      return this.http.get("http://localhost:8080/processPlaces")
        .map(res => res.text());
    }
    
  • Компонент

    processPlaces(){
     this._backendService.getPlacesForUser()
      .subscribe(
        data => this.result = data,
        err => this.logError(err),
        () => console.log('Places Request completed')
      );
    }
    

Атрибут result соответствует атрибуту компонента, который вы можете использовать в компоненте.

Вы можете заметить, что канал async доступен для прямого использования наблюдаемых в выражениях (например, внутри канала ngFor).

Я думаю, что этот ответ может вам помочь: >Как эффективно использовать компонент Http в службе в бета-версии angular 2?.

Надеюсь, это поможет вам, Тьерри.

person Thierry Templier    schedule 12.01.2016

Существует еще один способ вызывать данные для каждого компонента с помощью инфраструктуры Rxjs. Убедитесь, что сервисы можно использовать повторно для всех компонентов, поэтому делайте так, как вы можете делать код в сервисах, и подписывайтесь только на компонент:

Услуги

 import { Injectable } from 'angular2/core';    
 import { Http } from 'angular2/http';
 import { Result} from './models/result'; // model imported
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';

 @Injectable()
 export class Service {
   private _result: Result[];

   constructor(private http: Http) {
     this.result$ = new BehaviorSubject<Result[]>(this._result)
   }
   result$: BehaviorSubject<Result[]>;
   private _urlGet = '/api';

   getPlacesForUser(): void{
     this.http.get(this._urlGet)
      .map(res => JSON.parse(res.text()))
      .catch(error => console.log(error))
      .subscribe(result => {
         this.result = result;
       })
    }
 }

Компонент

 constructor(private _service: Service)
 ngOnInit(): any {
   this._service.result$.map(result => result.filter(res => 
    res.id)).subscribe(
        result => this.result = result); // map is optional to filter json
  }
person asad mohd    schedule 12.06.2018
comment
Мне пришлось добавить следующую строку: this.result$.next(this.result) после this.result = result в сервисе, чтобы компонент мог его подобрать. Запускаем Ангуляр 8. - person Gloire; 26.12.2019