Обнаружение угловых изменений с наблюдаемым таймером - PullRequest
Новая
       6

Обнаружение угловых изменений с наблюдаемым таймером

0 голосов
/ 12 ноября 2018

Справочная информация:

У меня есть несколько компонентов в приложении Angular 6, которые необходимы для отображения текущего времени (чч: мм).

Изначально они были реализованы с использованием setInterval с привязкой this.now в представлении: 

setInterval(() => {
   this.now = new Date();
}, 1000);

Естественно, это приводит к тому, что обнаружение изменений запускается каждую секунду, что бесполезно, поскольку значение будет обновляться только раз в минуту. Я могу улучшить это, запустив setInterval за пределами ngZone и вручную запустив обнаружение изменений, если будет перенесена минута.

Вопрос:

Я пытаюсь реализовать наблюдаемый поток дат, который каждую минуту генерирует новое значение. Это то, что я делаю далеко ... 

timer(0, 1000)
  .pipe(
    map(() => new Date()),
    distinctUntilChanged((a: Date, b: Date) => a.getMinutes() === b.getMinutes()),
    tap(date => console.log(date))
  );

Новая дата отправляется раз в минуту, однако при подписке на этот поток обнаружение изменений Angular запускается каждую секунду. (Я подтвердил это, добавив ngDoCheck к компоненту, который подписан).

Как я могу отложить обнаружение изменений, чтобы оно происходило только при появлении нового значения?

1 Ответ

0 голосов
/ 12 ноября 2018

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

По сути, в вашем коде, где вы реализовали это (при условии, что это отдельный сервис: some.service.ts), определите тему следующим образом: 

someSubject : Subject<Date> = new Subject<Date>();

interval(1000)
  .pipe(
    map(() => new Date()),
    distinctUntilChanged((a: Date, b: Date) => a.getMinutes() === b.getMinutes()),
    tap(date => {
       console.log(date);
       this.someSubject.next(date);
       });
  ).subscribe();

Подпишитесь на someSubject от того места, где вы хотите прослушать изменение даты, например: 

this._someService.someSubject.subscribe((date : Date) =>{
 console.log(date); //you'll have a new date object everytime your date object changes i.e everyminute
});

не забудьте импортировать interval из rxjs

Я создал пример (слушайте каждое второе изменение), используя StackBlitz: https://stackblitz.com/edit/angular-4ytdbs

...