【问题标题】:Angular 2 custom localeAngular 2 自定义语言环境
【发布时间】:2017-02-25 19:38:38
【问题描述】:

如何为 Angular 2 日期管道创建自定义语言环境?我希望能够按如下方式使用它{{value | date:'short'}} 并显示相关的日期格式。

来自this 的回答我知道如何使用提供程序在 Angular 中设置语言环境,但在 Angular 源代码中我似乎找不到日期管道使用的语言环境文件或它们如何包含在 angular 2 包中.

明确地说,我不想执行以下操作:{{value | date:"MM/dd/yy" }}

【问题讨论】:

  • @nsbm 我的第一句话询问了creating a custom locale。您的问题在哪里谈到创建自定义语言环境?像你这样的版主让我对 StackOverflow 的审核方式失去信心!

标签: angular


【解决方案1】:

简答

似乎没有办法做到这一点,实际上可能永远不会用于内置的 Angular2 date 管道。

详细说明

Angular2 团队选择通过日期管道源文件顶部提到的Internationalization API 来实现语言环境支持:

WARNINGS:
- this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.

从理论上讲,这意味着我们永远不必担心区域设置格式,因为它都可以通过浏览器直接提供的规范控制的 API 获得。

然而,在实践中,我们不得不担心浏览器是否支持您在应用程序中可能需要的所有未来语言环境。我尝试的第一个语言环境(fr-CH)不起作用,导致我发布了这个问题。似乎 Chrome 目前仅支持 fr(无方言),如 here 所述(尽管此链接适用于 Chrome 应用程序,但我认为可以安全地假设这与其 Intl 实现共享代码)

自定义管道替代方案

由于国际化 API 中似乎没有任何允许添加自定义语言环境,我最好的选择是使用矩库实现自定义管道;基于来自this reddit 帖子的示例,由 deadcorps3 提供(仅限概念代码):

// Locale settings
let locale = getUserSelectedLanguage(); // retrieve from somewhere else

@Pipe({
  name: 'i18nDate'
})
export class I18nDatePipe implements PipeTransform {
  transform(value: string, format: string): string {
    let momentDate = moment(new Date(value));
    if (momentDate.isValid())
      return momentDate.locale(locale).format(format);
    else
      return value;
    }
}

一些附加信息

  • Intl 对象here 有一个polyfill,但我还没有研究过这个& 不知道你是否可以用它来覆盖默认的浏览器实现。我个人更感兴趣的是使用 moment library 来实现一些东西——我已经在我的项目中使用它——而不是开始添加重复的功能。
  • 我还发现thisstackoverflow 的答案在我的任务中很有用。

【讨论】:

猜你喜欢
  • 2020-10-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-15
相关资源
最近更新 更多