javascript - Angular 2定期刷新 View

Question

我使用 moment.js .fromNow() 显示项目列表及其相对创建日期，如下所示:

getRelativeDate(date: string): string {
  return moment(date, 'YYYY-MM-DD HH:mm:ss').fromNow();
}

<小时/>

<div class="created">{{getRelativeDate(item.created)}}</div>

它看起来像这样:

但是，除非我以某种方式与该项目交互，否则它在初始加载后保持不变，这是有道理的，因为数据没有改变，当前时间改变了。

如何强制刷新这些值？每一分钟就足够了。

Answer 1

惊讶没有人提到为此创建管道？

import { Pipe, PipeTransform } from '@angular/core';

import moment from 'moment';

@Pipe({
  name: 'dateTimeFormat',
  pure: false,
})
export class DateTimeFormatPipe implements PipeTransform {
  transform(date: string, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
    return moment(date, format).fromNow();
  }
}

这通过将逻辑卸载到管道中来保持组件的干净。

<ul>
  <li *ngFor="let date of dates">
    {{ date | dateTimeFormat:'YYYY-MM-DD HH:mm:ss'}}
  </li>
</ul>

最酷的是该格式是可选的，并且可以在整个应用程序中重复使用。

然后定期刷新调用setInterval来更新组件。 您还需要调用 ChangeDetectorRef并根据您的 ChangeDetectionStrategy 调用 detectChanges。更好的是，detach组件完全。

实例 https://stackblitz.com/edit/angular-cli-moment-pipe

有用的矩管组 https://github.com/urish/angular2-moment/