使用翻译的自定义 angular2 日期格式管道

Question

首先，这是我想要完成的：

假设我有一个包含 js Date 对象的发布模型。现在，我想以自定义的、人类可读的格式呈现日期，该格式不显示日期和时间，而是从现在开始的偏移量（即 "just now"、"about one hour ago"、"about two hours ago"等）。

我对 TypeScript 和 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() 方法无法确保在构建或使用此管道时加载翻译文件。因此，我的自定义管道目前只有 returns 我的翻译密钥（因为 instant() 找不到我的翻译）。

对于较大的时间间隔（即超过一天前），我的管道应该在内部只使用日期格式管道，因此返回必须通过管道传输到 translate 的翻译密钥并不是一个真正的选择.

你有什么建议吗？使用自定义管道是否是我想要完成的正确方法？

谢谢！

Answer 1

你可以把它变成一个不纯的管道，return一个 Observable。这样你就可以将你的管道链接到 async 管道并让它无缝工作。

我认为这样你会遇到三种情况： - 时间差大：立即解决日期 - 时间间隔很小，翻译已经加载：立即翻译并解决 - 时间间隔很小，翻译还没有准备好：等待翻译文件加载，然后用正确的翻译解决

Answer 2

如果你不关心有外部依赖，为什么不使用 moment 管道，你在 angular 2 https://github.com/urish/angular2-moment

中有这个工具

使用翻译的自定义 angular2 日期格式管道

Custom angular2 date format pipe that uses translations

typescript

angular-translate

angular-pipe

angular