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

Question

我是 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

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，您必须手动添加与 相同的 。只有LOCALES的providing方式在angular versions上有所不同.检查以下内容：

1. 角度 5 及以上：

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

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

2. 角度 5 以下：

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

或

1. 更新您的模块.ts

   从"@angular/核心"导入 { NgModule， LOCALE_ID }

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

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

   registerLocaleData(localeFr(;

   .....

   @NgModule({

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

   }(

会做工作

Answer 4

互联网似乎同意Jahnavi Paliwal在这一点上的回答，但是我相信我们现在应该通过angular.json文件设置它，并通过LOCALE_ID提供程序获取它(如果需要的话(。 如果执行以下操作，则日期管道和角度材料日期选取器(等(将使用开箱即用的正确区域设置，而无需手动更改模块定义中的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",

Answer 5

使用管道，没有其他安装。

LocalizedDatePipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Locale } from 'src/app/contentful/interfaces/locale';
@Pipe({
name: 'localizedDate',
})
export class LocalizedDatePipe implements PipeTransform {
transform(value: any, locale: any): any {
const date = new Date(value);
const options: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
};
return date.toLocaleDateString(locale, options);
}
}

Search-overlay.component.html

<span *ngIf="card.date" class="hero-cards-carousel__date">
{{ card.date | localizedDate: vm.locale?.code }}
</span>

结果

"20.德兹。2012》