Angular 2定期刷新视图

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并detectChanges根据进行调用ChangeDetectionStrategy。更好的是，完全分离组件。

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

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