角度2“之前”管 [英] Angular 2 "time ago" pipe
本文介绍了角度2“之前”管的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
它应该将日期转换为字符串，例如5分钟前或'60秒前'。它工作得很好，到目前为止，但它不会在第一次计算后更新。如果给定的日期是例如5秒前，它将显示5秒前，但之后不会更改。
我已经尝试将管道的纯值设置为false，但没有帮助。
这是我的代码：
import'Pipe，PipeTransform} from'angular2 / core';
@Pipe（{
name：'messageTime'，
pure：false
}）
导出类MessageTimePipe实现PipeTransform {
transform （value：Date，[]）：string {
var result：string;
//当前时间
let now = new Date（）。getTime（）;
//以秒为单位发送邮件的时间
let delta =（now - value.getTime（））/ 1000;
//格式字符串
if（delta< 10）{
result ='jetzt';
} else if（delta< 60）{//在最后一分钟发送
result ='vor'+ Math.floor（delta）+'Sekunden';
} else if（delta< 3600）{//在最后一小时发送
result ='vor'+ Math.floor（delta / 60）+'Minuten';
} else if（delta< 86400）{//在最后一天发送
result ='vor'+ Math.floor（delta / 3600）+'Stunden';
} else {//发送一天以上
result ='vor'+ Math.floor（delta / 86400）+'Tagen';
}
返回结果;
}
}
我使用的是这样的过滤器： p>
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;
日期：日期;
ngOnInit（）{
this.date = new Date（2016，3，16，12，49，10）;
}
}
HTML：
< p class =time>
{{date | messageTime}}
< / p>
解决方案
最后让它工作，相当具有挑战性，需要间隔调整：）
import {Pipe，ChangeDetectorRef} from'angular2 / core';
import {Observable} from'rxjs / Observable';
import {AsyncPipe} from'angular2 / common';
@Pipe（{
name：'messageTime'，
pure：false
}）
导出类MessageTimePipe扩展AsyncPipe
{
值：日期;
timer：Observable< string> ;;
构造函数（ref：ChangeDetectorRef）
{
super（ref）;
}
transform（obj：any，args？：any []）：any
{
if（obj instanceof Date）
{
this.value = obj;
如果（！this.timer）
{
this.timer = this.getObservable（）;
}
return super.transform（this.timer，args）;
}
return super.transform（obj，args）;
}
private getObservable（）
{
return Observable.interval（1000）.startWith（0）.map（（）=>
{
var result：string;
//当前时间
let now = new Date（）。getTime（）;
//自发送邮件以来的时间秒
let delta =（now - this.value.getTime（））/ 1000;
//格式字符串
if（delta< 10）
{
result ='jetzt';
}
else if（delta< 60）
{//在最后一分钟发送
result ='vor'+ Math。 floor（delta）+'Sekunden';
}
else if（delta< 3600）
{//在最后一小时发送
result ='vor'+ Math.floor （delta / 60）+'Minuten';
}
else if（delta< 86400）
{//最后发送day
result ='vor'+ Math.floor（delta / 3600）+'Stunden';
}
else
{//发送多于一天
result ='vor'+ Math.floor（delta / 86400）+'Tagen';
}
返回结果;
}）;
};
}
I am trying to create a 'time ago' pipe for my Angular 2 application.
It should transform a date to a string such as '5 minutes ago' or '60 seconds ago'. It works nicely so far, but it doesn't update after the first calculation. If the given date is for example 5 seconds ago, it displays '5 seconds ago' but never changes after that.
I have already tried setting the pipes 'pure' value to false but that didn't help.
Here is my code:
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;
}
}
I'm using the filter like this:
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>
解决方案
Finally got it working, quite challenging and requires interval tweaking:)
import {Pipe, ChangeDetectorRef} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {AsyncPipe} from 'angular2/common';
@Pipe({
name: 'messageTime',
pure: false
})
export class MessageTimePipe extends AsyncPipe
{
value:Date;
timer:Observable<string>;
constructor(ref:ChangeDetectorRef)
{
super(ref);
}
transform(obj:any, args?:any[]):any
{
if (obj instanceof Date)
{
this.value = obj;
if(!this.timer)
{
this.timer = this.getObservable();
}
return super.transform(this.timer, args);
}
return super.transform(obj, args);
}
private getObservable()
{
return Observable.interval(1000).startWith(0).map(()=>
{
var result:string;
// current time
let now = new Date().getTime();
// time since message was sent in seconds
let delta = (now - this.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;
});
};
}
这篇关于角度2“之前”管的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
