Angular CLI Observable Pipe

Question

En essayant de créer un tube qui prend un horodatage date et retourne combien de temps il a été depuis ce temps.

je le tuyau suivant qui retourne la durée une fois, mais j'ai besoin ce tuyau pour incrémenter chaque seconde pour donner un effet de temporisation:

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(':'); 
    } 
} 

Je l'ai regardé le tuyau async mais je ne peux pas semble faites-le fonctionner comme je le désire.

Des solutions?

Answer 1

Le composant Pipe transmet la valeur du modèle et transforme une nouvelle valeur. Vous ne devez pas utiliser Pipe pour calculer une durée et mettre à jour la vue périodiquement car Pipe ne se mettra pas à jour à moins que la valeur ne soit modifiée. (Les tuyaux sont tous purs par défaut!)

Je pense que vous devriez implémenter ceci dans votre composant au lieu de l'implémenter dans Pipe.

Answer 2

Inspirée du commentaire laissé de @Hinrich

j'ai décidé de passer l'heure actuelle à la conduite. Changer cette valeur déclencherait le changement de canal. Cela permet de réutiliser la logique de calcul de la différence deux fois dans toute mon application.

Pour obtenir cela apparaît comme une minuterie je mis une fonction de temporisation qui met à jour l'argument de l'heure actuelle dans le composant où le tuyau est utilisé

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(':'); 
    } 
} 

puis dans le composant

@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()); 
    }) 
    } 
} 

avec le code html étant

{{order.createdAt | duration:now}}