8

我是一个 Angular 初学者，我阅读了 Angular 的文档，但是对于这样一个基本的东西来说很难......我希望我的应用程序中的日期和其他内容具有法语区域设置，而不是默认的“en-US”。 ..

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

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

好的，现在我查看日期管道上的另一个文档页面。它指出：

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

但是关于如何使用的任何示例locale，因此，我尝试在测试应用程序链接中进行操作，就像这样，{{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
4

4 回答 4

20

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

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

在您的应用模块中

希望能帮助到你

于 2018-09-21T09:13:05.227 回答
5

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

  1. Angular 5 及以上：

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

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

  2. 低于 Angular 5：

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

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

@NgModule({
    imports : [],
    providers: [ { provide: LOCALE_ID, useValue: "fr-FR" }]
    //Your code
})
于 2018-09-21T09:37:26.897 回答
3

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

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

如果您不希望日期名称从管道中删除“EEEE”

或者

  1. 更新你的 module.ts

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

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

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

    registerLocaleData(localeFr);

    ......

    @NgModule({

    .....提供者：[ {provide：LOCALE_ID，useValue：“fr-CA”}]

    })

会做的工作

于 2018-09-21T09:39:10.177 回答
2

互联网似乎同意 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",
于 2020-07-03T15:22:08.163 回答