Angulaire 2 “il y a le temps” pipe

A finalement obtenu ce travail, assez difficile et nécessite l'intervalle de peaufinage:)

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

OriginalL'auteur kemsky

Basé sur l'excellente réponse par @kemsky, j'ai mis en œuvre une variante de la Pipe qui corrige quelques problèmes de mise en œuvre:

• de fonctionner correctement avec angulaire 2 final et à partir de
• cesse de vote lorsqu'ils sont détruits
• utilise une simple interruption de la diminution de l'intervalle d'interrogation compatible avec la sortie

Vous trouverez l'intégralité du tuyau + spec code dans ce résumé:
https://gist.github.com/JohannesRudolph/8e6de056d9e33353f940d9da9e6ffd82

OriginalL'auteur Johannes Rudolph

Vous avez besoin de mettre à jour la " date de référence pour déclencher Angular2 de détection de changement, avec un setTimeout(()=>this.date=new Date(), period) par exemple, comme Thierry l'a souligné.

Avez-vous vraiment besoin d'une mise à jour à chaque seconde?
Mise à jour toutes les 60 secondes peut-être assez bon selon votre cas d'utilisation, et peut afficher 'maintenant' ou 'moins qu'il y a une minute" pour les 60 premières secondes.

Mais si vous voulez vraiment les secondes, vous avez seulement besoin de mettre à jour toutes les secondes pour les 60 premières secondes. Le setTimeout(1000) peut alors devenir setTimeout(60000), tout en minimisant les coûts.

OriginalL'auteur Julien

Un moment.js solution. Travail/testé Angulaire 6:

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

moment.locale("de"); //set your language

@Pipe({
    name:'timeago',
    pure:false
})
export class TimeagoPipe implements PipeTransform {    
    private timer: number;
    constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {}
    transform(value:string) {
        this.removeTimer();
        let d = new Date(value);
        let now = new Date();
        let seconds = Math.round(Math.abs((now.getTime() - d.getTime())/1000));
        let timeToUpdate = (Number.isNaN(seconds)) ? 1000 : this.getSecondsUntilUpdate(seconds) *1000;
        this.timer = this.ngZone.runOutsideAngular(() => {
            if (typeof window !== 'undefined') {
                return window.setTimeout(() => {
                    this.ngZone.run(() => this.changeDetectorRef.markForCheck());
                }, timeToUpdate);
            }
            return null;
        });

    return moment(d).fromNow();

    }
    ngOnDestroy(): void {
        this.removeTimer();
    }
    private removeTimer() {
        if (this.timer) {
            window.clearTimeout(this.timer);
            this.timer = null;
        }
    }
    private getSecondsUntilUpdate(seconds:number) {
        let min = 60;
        let hr = min * 60;
        let day = hr * 24;
        if (seconds < min) { //less than 1 min, update every 2 secs
            return 2;
        } else if (seconds < hr) { //less than an hour, update every 30 secs
            return 30;
        } else if (seconds < day) { //less then a day, update every 5 mins
            return 300;
        } else { //update every hour
            return 3600;
        }
    }
}

OriginalL'auteur kenny