我正在尝试为我的 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>
最佳答案
以下库用英语做同样的工作,可以 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>
关于date - Angular 2 "time ago"管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36663148/