Angular CLI Observable Pipe

Question

我试图创建一个管道，它需要一个日期时间戳并返回从那时起已经有多长时间。

我有以下的管道曾经返回时间，但我需要这个管道递增每一秒给一个计时器效果：

import { Pipe, PipeTransform } from '@angular/core'; 
import * as moment from 'moment'; 

@Pipe({ name: 'duration' }) 
export class DurationPipe implements PipeTransform{ 
    transform(value: any){ 
    var now = moment(new Date()); 
    var end = moment(value); 
    var dif = moment.duration(now.diff(end)); 
    var toReturn = []; 
    if(("00" + dif.hours()).slice(-2) != "00"){ 
     toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2); 
    } 
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2); 
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2); 
    return toReturn.join(':'); 
    } 
} 

我已经看过了异步管道，但我似乎无法让它工作我的愿望。

任何解决方案？

Answer 1

管道组件传递来自模板的值并转换出新的值。您不应该使用Pipe来计算持续时间并定期更新到视图，因为除非更改值，否则Pipe将不会自行更新。 （管道默认情况下都是纯管道）

我认为你应该将这个实现到你的组件中，而不是在Pipe中实现这个。

Answer 2

从评论中获得灵感来自左@Hinrich

我决定在当前时间到管道通过。更改此值会触发管道更改。这允许两次计算差异的逻辑在我的应用程序中重用。

为了得到这个显示为一个定时器我设置超时函数，在管道正在使用

import { Pipe, PipeTransform } from '@angular/core'; 
import * as moment from 'moment'; 

@Pipe({ name: 'duration'}) 
export class DurationPipe implements PipeTransform{ 
    transform(value: any, now: any){ 
    var end = moment(value); 
    var dif = moment.duration(now.diff(end)); 
    var toReturn = []; 
    if(("00" + dif.hours()).slice(-2) != "00"){ 
     toReturn[toReturn.length] = ("00" + dif.hours()).slice(-2); 
    } 
    toReturn[toReturn.length] = ("00" + dif.minutes()).slice(-2); 
    toReturn[toReturn.length] = ("00" + dif.seconds()).slice(-2); 
    return toReturn.join(':'); 
    } 
} 

然后在组件

@Component({ 
    moduleId: module.id, 
    templateUrl: 'pending.template.html', 
    styleUrls: ['../orders.scss'] 
}) 

export class PendingComponent implements OnInit { 

    orders: any[]; 
    now = moment(new Date()); 

    constructor(private route: ActivatedRoute, private router: Router, private orderService: OrderService, public dialog: MdDialog){} 

    ngOnInit() { 
    Observable.interval(1000).subscribe(x=>{ 
     this.now = moment(new Date()); 
    }) 
    } 
} 

组件更新当前的时间参数与HTML是

{{order.createdAt | duration:now}}