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

Question

我像这样在html中显示日期

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

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

Answer 1

你需要设置你的'语言环境'：

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" }}

---

全局设置

这是一种设置“全局”你最喜欢的语言环境的方法（如果它不同于“en”，默认值），所以你不需要在每个管道中写下来：

除了上述所有代码之外，您还需要添加到app.module.t中，此导入和 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
  ],
...