date - Angular 2 "time ago"管道

Question

我正在尝试为我的 Angular 2 应用程序创建一个“time ago”管道。

它应该将日期转换为字符串，例如“5 分钟前”或“60 秒前”。到目前为止它运行良好，但在第一次计算后不会更新。例如，如果给定的日期是 5 秒前，它会显示“5 秒前”，但之后永远不会改变。

我已经尝试将管道的“纯”值设置为 false，但这没有帮助。

这是我的代码:

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'messageTime',
  pure: false
})
export class MessageTimePipe implements PipeTransform {
  transform(value: Date, []): string {
    var result: string;

    // current time
    let now = new Date().getTime();

    // time since message was sent in seconds
    let delta = (now - value.getTime()) / 1000;

    // format string
    if (delta < 10) {
      result = 'jetzt';
    } else if (delta < 60) { // sent in last minute
      result = 'vor ' + Math.floor(delta) + ' Sekunden';
    } else if (delta < 3600) { // sent in last hour
      result = 'vor ' + Math.floor(delta / 60) + ' Minuten';
    } else if (delta < 86400) { // sent on last day
      result = 'vor ' + Math.floor(delta / 3600) + ' Stunden';
    } else { // sent more than one day ago
      result = 'vor ' + Math.floor(delta / 86400) + ' Tagen';
    }

    return result;
  }
}

我正在使用这样的过滤器:

typescript :

import {Component, Input} from 'angular2/core';
import {MessageTimePipe} from '../../pipes/message-time.pipe';

@Component({
  selector: 'message-item',
  pipes: [MessageTimePipe],
  templateUrl: 'build/components/message-item/message-item.component.html'
})
export class MessageItemComponent {
  @Input()
  message: JSON;

  date: Date;

  ngOnInit() {

   this.date = new Date(2016, 3, 16, 12, 49, 10);
  }
}

HTML:

<p class="time">
  {{ date | messageTime }}
</p>

Answer 1

以下库用英语做同样的工作，可以 fork 以更改语言或支持不同的语言:

https://www.npmjs.com/package/time-ago-pipe

npm install time-ago-pipe --save

然后在@NgModule 中你想使用它:

import {TimeAgoPipe} from 'time-ago-pipe'

@NgModule({
    imports: [... etc ...],
    declarations: [AppComponent, ...etc..., TimeAgoPipe],
    bootstrap: [AppComponent]
})

在模板中:

<span>{{your_date | timeAgo}}</span>