使用 Observable 计时器进行角度变化检测

Question

背景：

我的 Angular 6 应用程序中有许多组件需要显示当前时间 (hh:mm)。

这些最初是使用setInterval 实现的，this.now 绑定在视图中：

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

自然，这会导致更改检测每秒运行一次，这是一种浪费，因为该值每分钟只会更新一次。我可以通过在ngZone 之外运行setInterval 来改进这一点，并在时间已过时手动触发更改检测。

问题：

我正在尝试实现每分钟发出一个新值的可观察日期流。这就是我目前所做的......

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

每分钟发出一次新日期，但是订阅此流会导致 Angular 的更改检测每秒运行一次。 （我通过向订阅的组件添加ngDoCheck 来确认这一点）。

如何推迟更改检测，使其仅在发出新值时发生？

Answer 1

您可以为此使用主题和间隔，我想可能是这样的：

基本上在你实现了这个的代码中（假设它是一个单独的服务：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
});

别忘了从rxjs 导入interval

我使用 StackBlitz 创建了一个示例（每秒钟监听一次更改）：https://stackblitz.com/edit/angular-4ytdbs