使用日期管道用不同语言的月份名称格式化日期

Question

我像这个一样用html显示日期

<span >{{ item.lastModified | date : 'MMM d, y' }}</span>

所以日期显示的内容类似于Jul 20, 2021现在，当我更改浏览器语言时，我需要一个月的时间才能更改为该语言，该语言应该是动态选择的，但它以英语显示。我该怎么做？

Answer 1

您需要设置您的'locale'：

1. 在app.module.ts中：

// Import all the languages you need (you can add any language you want i.e: '../locales/en-GB', '/locales/en-US', ... ).
// In this example, I will use 'es' for Spanish and 'fr' for French:
import myLocaleEs from '@angular/common/locales/es'
import myLocaleFr from '@angular/common/locales/fr'
import {registerLocaleData} from '@angular/common';
registerLocaleData(myLocaleEs);
registerLocaleData(myLocaleFr);

2. 在HTML中：

// "en" is always by default, you don't need to register
{{ fecha | date: "long":"":"en" }}

{{ fecha | date: "long":"":"es" }}

{{ fecha | date: "short":"":"fr" }}
or  {{ fecha | date: 'MMM d, y':"":"fr" }}

---

全局设置

这是一种设置"；globaly"；你最喜欢的语言环境(如果它与默认的"en"不同(，那么你不需要在每个管道中都写下来：

您需要添加到app.module.ts，除了上述所有代码，此导入和PROVIDERS部分：

...
import { LOCALE_ID} from '@angular/core';
...
...
providers: [
{provide: LOCALE_ID, useValue: 'es'} // Same value you used above ‘es’ or 'fr' or whatever you had registered
],
...