Angular: 如何以法语格式显示日期

Question

我是一个 Angular 初学者，我阅读了 Angular 的文档，对于这样一个基础的东西很难......我希望我的应用程序中的日期和其他东西有法语语言环境，而不是默认 'en-US'...

我开始阅读这个 Angular documentation，这似乎有点不完整，因为我做了文档说明，但失败了：

>...\ClientApp>ng serve --configuration=fr
Configuration 'fr' could not be found in project 'ClientApp'.

好的，现在我在日期管道上查看另一个 documentation page。它指出：

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

但是关于如何使用 locale 的任何示例，所以，我尝试在测试应用程序 link 中这样做，就像这样 {{myDate | date: 'medium': undefined : 'fr'}} 但它什么都不显示......我在控制台中有：

ERROR
Error: InvalidPipeArgument: 'Missing locale data for the locale "fr".' for pipe 'DatePipe'

我还应该做什么或安装什么才能在 Angular 中显示法语格式的日期？

Angular CLI: 6.1.5
Node: 8.11.1
OS: win32 x64
Angular: 6.1.8

Answer 1

尝试将以下代码添加到您的应用模块中

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

https://angular.io/guide/i18n#i18n-pipes

编辑：然后，如果您想将此语言环境设置为默认设置，则需要将 LOCALE_ID 注入标记设置为 'fr'，就像这样：

{provide: LOCALE_ID, useValue: 'fr' }

在您的应用模块中

希望对您有所帮助

Answer 2

答案取决于您使用的 angular 版本。您必须提供 LOCALE，您将 using.The 默认 LOCALE 配置为 en-US，对于所有其他，您必须手动添加与 [=16] 相同的内容=].只有 providing 对 LOCALES 的方式与 angular versions 不同。检查以下内容：

Angular 5岁以上:

在您的 app.module.ts 中添加以下行：

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr');

低于Angular5:

在您的 app.module.ts 中添加以下行：

import { LOCALE_ID } from '@angular/core';

@NgModule({
    imports : [],
    providers: [ { provide: LOCALE_ID, useValue: "fr-FR" }]
    //Your code
})

Answer 3

试试这个（法文格式：[日名] [日号] [月名] [年号]）

{{myDate | date:'EEEE, d,MMMM, y'}}

如果您不想将日期名称从管道中删除 'EEEE'

或

更新您的 module.ts

从'@angular/core'导入{NgModule，LOCALE_ID}；

从“@angular/common”导入 {registerLocaleData}；

从“@angular/common/locales/fr”导入 localeFr；

registerLocaleData(localeFr);

.....

@NgModule({

....... 供应商：[ {提供：LOCALE_ID，使用价值："fr-CA"} ]

})

会完成工作

Answer 4

互联网似乎同意 Jahnavi Paliwal 在这一点上的回答，但我相信我们现在应该通过 angular.json 文件设置它并通过 LOCALE_ID 供应商。如果您执行以下操作，那么 Date Pipe 和 Angular Material DatePicker（等）将使用开箱即用的正确区域设置，而无需在您的模块定义中手动更改 LOCALE_ID。

"projects": {
  "myProject": {
    "projectType": "application",
    ...
    },
    "i18n": {
      "sourceLocale": "en-GB" // <-- specify your preferred default
    },
    "architect": {
      "build": {
        ...
        "options": {
          "localize": true, // <-- tell Angular to check
          ...
          "aot": true,
          "outputPath": "dist",

Angular: 如何以法语格式显示日期

Angular: How to display a date in French format

angular

internationalization

angular6

angular-i18n