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。更好的是，detach组件完全。

直播示例 https://stackblitz.com/edit/angular-cli-moment-pipe

有用的瞬间管道 https://github.com/urish/angular2-moment/

Answer 2

使用setInterval。

我们需要ChangeDetectorRef来执行此操作。

import {OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core';

export class Listcomponent implements OnInit, OnDestroy {

   intervalHolder: any;

   constructor(private _changeDetectorRef: ChangeDetectorRef) {
   }

   ngOnInit(): void {
     this.intervalHolder = setInterval(() => {
       // Let's refresh the list.
       this._changeDetectorRef.markForCheck();
     }, 1000 * 60); // 1 minute
   }

   ngOnDestroy(): void {
      clearInterval(this.intervalHolder);
   }
}

Answer 3

如果您的数据不是异步，则可以在setInterval()中创建ngOnInit()，然后将其清除ngOnDestroy()。假设您创建的日期存储在密钥items下的created数组中：

<强> component.ts

myFromNowInterval: any;
myFromNow = Array(this.items.length).fill('');

ngOnInit() {
  this.myFromNowInterval = setInterval( () => {
    this.items.forEach( (item, index) => this.myFromNow[index] = this.getRelativeDate(item) )
  }, 60000);
}

ngOnDestroy() {
  clearInterval(this.myFromNowInterval);
}

<强> component.html

<div *ngFor="item of items; let i = index;">
  <div class="created">{{ myFromNow[i] }}</div>
</div>

这将每分钟更新myFromNow数组，并将新数组的索引与DOM对齐。

Answer 4

我认为只需在组件上放置一个可观察的间隔即可触发变更检测。

NumberStringConverter

使用此

进行测试

triggerCD$;

ngOnInit() {
  this.triggerCD$ = Observable.interval(60000)
}

没有触发器，显示不会改变使用触发器，now（）更新模板（虽然没有直接链接触发）。

Angular 2定期刷新视图

4 个答案: