Привязка данных в реальном времени без перезагрузки страницы в Angular

Question

У меня есть API, который отправляет данные в реальном времени, и я хочу отображать данные в моем представлении без обновления страницы. setInterval не работает в моем случае, так как время ответа от API может быть отложено, и я не хочу перезагружать компонент.

Есть ли какое-нибудь решение для обхода:

ngOnInit(){
  this.realTimeData()
}

realTimeData(){
  this.http.get(api)
    .subscribe(res => {
       this.bindData = res;
    })
}

Answer 1

Опрос конечной точки http с интервалом:

Вы можете использовать операторы создания timer или interval rx js для создания и запуска вызова API .

  realTimeDataSubscription$: Subscription;

  ngOnInit() {
    this.realTimeData();
  }

  realTimeData() {
    this.realTimeDataSubscription$ = timer(0, 1000)
      .pipe(switchMap(_ => this.http.get(api)))
      .subscribe(res => {
        this.bindData = res;
      });
  }

  ngOnDestroy() {
    this.realTimeDataSubscription$.unsubscribe();
  }

Всегда рекомендуется помещать http вызовов в служебный файл и вводить в компонент.

Answer 2

Вы можете использовать интервальный наблюдаемый оператор rx js. Это небольшой пример:

import 'rxjs/add/observable/interval';
... 
sub = Observable.interval(10000)
    .subscribe((val) => { <your code here> });

Также вы можете остановить его отписывание с помощью:

this.sub.unsubscribe();

Или используйте timer из Observable:

timer = Observable.timer(10000);
this.timer.subscribe((t) => this.<your method>());