Angular CLI Observable Pipe

Question

Ich versuche, eine Pipe zu erstellen, die einen Datums- und Zeitstempel akzeptiert und zurückgibt, wie lange es seit dieser Zeit ist.

Ich habe folgendes Rohr, das einmal die Dauer zurückkommt, aber ich brauche, um dieses Rohr in jede Sekunde zu erhöhen, einen Timer-Effekt zu geben:

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

Ich habe bei dem Asynchron-Rohr aussieht, aber ich kann nicht scheinen zu mach es so, wie ich es wünsche.

Irgendwelche Lösungen?

Answer 1

Die Pipe-Komponente übergibt den Wert aus der Vorlage und wandelt einen neuen Wert um. Sie sollten Pipe nicht verwenden, um eine Zeitdauer zu berechnen und regelmäßig auf die Ansicht zu aktualisieren, da Pipe sich nicht aktualisiert, wenn sich der Wert nicht ändert. (Pipes sind alle reine Pipe standardmäßig!)

Ich denke, Sie sollten dies in Ihre Komponente implementieren, anstatt dies in Pipe zu implementieren.

Answer 2

Inspiriert von dem Kommentar verfaßt von @Hinrich

ich in der aktuellen Zeit an das Rohr passieren entschieden. Wenn Sie diesen Wert ändern, wird die Pipe geändert. Dadurch kann die Logik zur Berechnung der Differenz in zwei Fällen in meiner App wiederverwendet werden.

Um dies als Timer erscheint ich eine Timeout-Funktion einstellen, die das aktuelle Zeitargument in der Komponente aktualisiert, wo das Rohr

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

dann in der Komponente

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

benutzt wird mit der html wird

{{order.createdAt | duration:now}}