Angular 2自定义区域设置

时间:2016-10-16 21:56:12

标签: angular

如何为angular 2日期管道创建自定义区域设置?我希望能够按照以下{{value | date:'short'}}使用它,并显示相关的日期格式。

this回答我知道如何使用提供程序以角度设置语言环境,但在角度源代码中没有任何地方我可以找到日期管道使用的语言环境文件或它们如何包含在角度中2包。

要明确我不想做以下事情:{{value | date:"MM/dd/yy" }}

1 个答案:

答案 0 :(得分: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实现共享代码)

自定义管道替代

由于在Internationalization 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实现某些内容更感兴趣 - 我已经在我的项目中使用了这些内容 - 而不是开始添加重复的功能。
  • 我还发现this stackoverflow答案在我的任务中很有用。