使用翻译

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是小和翻译尚未准备好：等待翻译文件加载，然后解决与正确的翻译