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

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

我像这样在 html 中显示日期

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

所以日期显示如下Jul 20,2021 现在，当我更改浏览器语言时，我需要将月份更改为该语言，该语言应该被动态选取，但它以英语显示。我该怎么做？

解决方法

您需要设置您的“区域设置”：

在您的 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);

在您的 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" }}

全局设置

这是一种“全局”设置您最喜欢的语言环境的方法（如果它与默认的“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
  ],...