使用翻譯

Question

第一個自定義angular2日期格式管，這是我想達到什麼：

比方說，我有一個包含js的Date對象發佈的模型。現在，我想以自定義的，人類可讀的格式呈現日期，該格式不顯示日期和時間，而是從現在開始的偏移（即「剛纔」，「大約一小時前」，「大約兩個小時前」 「等）。

我是新來的兩個，打字稿及angular2，但是從我至今讀，最優雅的方法是使用自定義的管道像：

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

這種方法的問題是， TranslateService的instant()方法不能確保在構建或使用此管道時加載翻譯文件。因此，我的自定義管道當前只是返回我的翻譯密鑰（因爲instant()未找到我的翻譯）。

對於較大的時間間隔（即超過一天前），我的管道應該在內部使用日期格式管道，因此返回一個必須管道化到translate的翻譯密鑰並不是真正的選擇。

你有什麼建議嗎？使用自定義管道是我想要完成的正確方法？

謝謝！

Answer 1

如果你不在乎有一個外部依賴，爲什麼不使用時刻管道，你有這個工具在角2 https://github.com/urish/angular2-moment

Answer 2

你可以把它變成不純的管道並返回一個Observable。這樣，您可以將管道連接到async管道，並使其無縫工作。

這樣，你就會有三種情況，我認爲： - 在timegap大：與日期解決立即 - 的timegap小，翻譯已經被加載：翻譯並立即解決 - 的timegap是小和翻譯尚未準備好：等待翻譯文件加載，然後解決與正確的翻譯