tube de format de date personnalisée angular2 qui utilise les traductions

Question

d'abord, ce que je voudrais accomplir:

Disons que j'ai un modèle pour un affichage qui contient un objet Date js. Maintenant, je voudrais rendre la date dans un format personnalisé, lisible par l'homme, qui ne montre pas de date et d'heure, mais plutôt un décalage par rapport à maintenant ("juste maintenant", "il y a environ une heure", " etc.).

Je suis nouveau à la fois, tapuscrit et angular2, mais de ce que je lis jusqu'à présent, l'approche la plus élégante serait d'utiliser un tuyau personnalisé comme ça:

@Pipe({name: 'hrTime'}) 
export class HrTimePipe implements PipeTransform { 

    constructor(private translate: TranslateService) { 

    } 

    transform(val: Date): string { 

     // Roughly check if that date is about one hour ago 
     let now: Date = new Date(); 
     now.setMinutes(now.getMinutes() - 90); 
     if (val > now) { 
      return this.translate.instant("about_1_h_ago"); 
     } 
    } 
} 

Le problème avec cette approche est que La méthode instant() de TranslateService ne vérifie pas que le fichier de traduction est chargé au moment où ce tube est construit ou utilisé. Par conséquent, mon tube personnalisé renvoie actuellement ma clé de traduction (puisque instant() ne trouve pas ma traduction). Pour des intervalles de temps plus longs (c'est-à-dire plus d'un jour auparavant), mon tube doit utiliser uniquement le tube de format de date, il n'est donc pas vraiment possible de renvoyer une clé de traduction à canaliser dans translate.

Avez-vous des suggestions? Est-ce que l'utilisation d'un tuyau personnalisé est la bonne approche pour ce que je voudrais accomplir?

Merci!

Answer 1

Si vous ne vous souciez pas d'avoir une dépendance externe, pourquoi ne pas utiliser les tuyaux moment, vous avez cet outil en angulaire 2 https://github.com/urish/angular2-moment

Answer 2

Vous pourriez en faire un tuyau impur et retourner un observable. De cette façon, vous pouvez enchaîner votre tuyau au tuyau async et le faire fonctionner de façon transparente.

De cette façon, vous auriez trois scénarios que je pense: - la timegap est grande: résoudre la date immédiatement - le timegap est petit et les traductions ont été chargés déjà: traduire et résoudre immédiatement - le timegap est petit et les traductions ne sont pas encore prêtes: attendre le chargement du fichier de traduction et ensuite résoudre avec la traduction correcte