Question

我是Angular的初学者，我阅读了Angular的文档，很难做到这一点……我希望我的应用程序中的日期和其他内容具有法语语言环境，而不是默认的'en-美国'...

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

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

好的，现在我看一下Date管道上的另一个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。默认的LOCALE配置为en-US，对于所有其他参数，必须手动添加与providers相同的名称。。 providing仅LOCALES与angular versions的方式有所不同。检查以下内容：

Angular 5及以上：

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

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

低于Angular 5 ：

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

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

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

Answer 3

只需尝试一下（法语格式：[日期名称] [日期编号] [月份名称] [年份编号]）

{{myDate |日期：'EEEE，d，MMMM，y'}}

如果您不想使用日名，请从管道中删除“ EEEE”

OR

更新您的module.ts

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

从'@ angular / common'导入{registerLocaleData};

从'@ angular / common / locales / fr'导入localeFr;

registerLocaleData（localeFr）;

.....

@NgModule（{

... 提供者：[ {提供：LOCALE_ID，useValue：“ 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",

角度：如何以法语格式显示日期

4 个答案: