使用日期管道以不同语言设置带有月份名称的日期格式

Question

我像这样在 html 中显示日期

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

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

Answer 1

您需要设置您的\'区域设置\'：

\n

\n
1. 在你的app.module.ts中：
\n

\n

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

\n

\n
2. 在您的 HTML 中：
\n

\n

\n    // "en" is always by default, you don\'t need to register\n    {{ fecha | date: "long":"":"en" }}\n    \n    {{ fecha | date: "long":"":"es" }}\n\n    \n    {{ fecha | date: "short":"":"fr" }}\nor  {{ fecha | date: \'MMM d, y\':"":"fr" }}\n

\n\n

全局设置

\n

这是一种设置“全局”您最喜欢的语言环境的方法（如果它与默认的“en”不同），因此您不需要在每个管道中都写下它：

\n

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

\n

...\nimport { LOCALE_ID} from \'@angular/core\';\n...\n\n...\nproviders: [\n    {provide: LOCALE_ID, useValue: \'es\'} // Same value you used above \xe2\x80\x98es\xe2\x80\x99 or \'fr\' or whatever you had registered\n  ],\n...\n\n

\n