Вызов общей функции до и/или после HTTP-запроса в угловом 2

Question

Мне нужно настроить общий загрузчик на весь проект angular2. Так что я просто хочу сделать это, когда мой новый вызов http сгенерирует либо GET, POST, либо PUT, а затем появится запрос отправителя загрузки. Как только http ответ (успех или ошибка) поступает с сервера, тогда загрузчик должен исчезнуть.

Доступен любой встроенный модуль, который я могу сделать выше функциональности. Или дайте мне любой способ, чтобы я мог делать это с помощью угловых функций. Я использую rxjs для запроса http.

Я не хочу использовать jQuery или Javascript.

Answer 1

Создайте http-перехватчик и вызовите свои общие функции внутри него. Вы можете либо написать собственную реализацию перехватчик like this или использовать an external library

Answer 2

@Injectable() 
class MyService { 
    private change:Subject<boolean> = new BehaviorSubject(false); 
    public change$ = this.change.asObservable(); 

    constructor(private http:Http) {} 

    get(...) { 
    this.change.next(true) 
    return this.http.get(...) 
    .map(...) 
    .finally(_ => this.change.next(false); 
    } 
} 

@Component({ 
    selector: 'loader', 
    template: ` 
    <div *ngIf="myService.change | async">is loading ...</div> 
` 
)} 
class LoaderComponent { 
    constructor(public myService:MyService){} 
} 

Answer 3

Расширение HTTP работает хорошо - в нашем проекте мы также хотели явный контроль «загрузчика» ака блесны для некоторых сценариев. Таким образом, у нас есть SpinnerService в нашем Core module, который доступен для всех компонентов.

@Injectable() 
export class SpinnerService { 

    private spinnerStateSource = new Subject<SpinnerState>(); 
    spinnerState$ = this.spinnerStateSource.asObservable(); 

    private defaultMessage: string = 'Loading...'; 

    show(message?: string) { 

    let msg = this.defaultMessage as string; 
    if (message) { 
     msg = message; 
    } 

    this.spinnerStateSource.next({ showing: true, message: msg }); 
    } 

    hide() { 
    this.spinnerStateSource.next({ showing: false, message: '' }); 
    } 

    spin(obs: Observable<any>, message?: string): Observable<any> { 
    this.show(message); 
    return obs.finally(() => this.hide()); 
    } 

} 

class SpinnerState { 
    showing: boolean; 
    message: string; 
} 

компонент в основном модуле подписывается на услугу, чтобы показать/скрыть фактический спиннера UI (EDIT: так же, как в @ ответ Гюнтера в), а также другие компоненты могут (через службу) скажите вертушку, чтобы показать /скрывать.

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

например. в потребляющем компоненте:

this.spinnerService.spin(
    Observable.forkJoin(
     this.refDataService.getRefDataList('statusTypes'), 
     this.refDataService.getRefDataList('itemTypes') 
    ) 
).subscribe(result => { 
      this.statusTypes = result[0]; 
      this.itemTypes = result[1]; 
});