使用Moment.js自动更新相对时间的显示

Question

给定项目列表（将其视为与多条消息聊天），我想使用moment.js来显示每个项目的相对时间（例如，自创建以来）。

每个项目都有其自己的组成部分，并且使用以下代码显示相对时间：

get timeFromNow(): string {
  return moment(this.pageLoaded).fromNow(); // pageLoaded is a JS Date
}

问题是该组件不会更新相对时间的显示，因为原始输入（pageLoaded在上面的示例中）不会更改。

我的问题是：是否有应对这种情况的最佳实践？目前，我正在使用markForCheckof ChangeDetectorRef触发重新渲染。但是，我不确定这是否是一种性能良好的方法。

我已经在Stackblitz上创建了一个简单的演示。在演示中，我使用上述内容markForCheck触发更新。

Answer 1

从技术角度来看，您有一个很好的解决方案。如果您想要更好的设计，请进入反应式编程的世界。

无需手动开始检查，您可以使用流并让Angular完成工作：

export class MomentComponent implements OnInit  {
  pageLoaded: Moment;
  timeFromNow: Observable<string>;

  ngOnInit() {
    this.pageLoaded = moment(new Date());

    this.timeFromNow = interval(1000).pipe(
                         map(() => this.pageLoaded.fromNow()),
                         distinctUntilChanged()
                       );
  }
}

interval类似于setInterval您的示例：它每1000ms发出一个值。然后，我们用一个时间字符串替换该值。而已。每秒钟发出一个新的时间字符串。我加了distinctUntilChanged()了一个新值，仅当它与旧值不同时才发出。

在模板中，您可以使用async管道使用流：

template: `Page loaded: <span class="relativeTime">{{ timeFromNow | async}}</span>`

发出新的时间字符串时，将更新HTML。没有不必要的检查和计算。作为奖励，使用async管道可以在组件销毁并且您不会造成内存泄漏时自动取消计时器。

您可以检查分叉的演示。