如何在Angular 2的DatePipe中设置语言环境?

2020/11/17 04:23 · javascript ·  · 0评论

我想使用欧洲格式显示日期,dd/MM/yyyy但使用DatePipe shortDate格式仅使用美国日期样式显示MM/dd/yyyy


我假设多数民众赞成在默认语言环境是en_US。
也许我在文档中丢失了,但是如何更改Angular2应用程序中的默认语言环境设置?也许有某种方法可以将自定义格式传递给DatePipe?

从Angular2 RC6开始,您可以通过添加提供程序在应用程序模块中设置默认语言环境:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

货币/日期/数字管道应选择区域设置。LOCALE_ID是一个OpaqueToken,将从角度/核心导入。

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

对于更高级的用例,您可能希望从服务中选择语言环境。创建使用日期管道的组件时,语言环境将被解析(一次):

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

希望对你有效。

如果您想为您的应用设置一次语言,则使用LOCALE_ID的解决方案非常有用。但是,如果要在运行时更改语言,则无法使用。对于这种情况,您可以实现自定义日期管道。

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

现在,如果您使用TranslateService更改应用程序的显示语言(请参阅ngx-translate

this.translateService.use('en');

您应用中的格式应自动更新。

使用示例:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

在此处检查我的简单“ Notes”项目

在此处输入图片说明

随着angular5以上答案不再有效!

如下代码:

app.module.ts

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

导致以下错误:

错误:缺少语言环境“ de-at”的语言环境数据。

随着angular5你必须加载并注册在自己所使用的语言环境文件。

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

文献资料

如果您使用TranslateServicefrom @ngx-translate/core,则下面是未创建新管道的版本,该管道可在运行时动态切换(在Angular 7上进行了测试)。使用DatePipe的locale参数(docs):

首先,声明您在应用中使用的语言环境,例如app.component.ts

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

然后,动态使用您的管道:

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }

我看过date_pipe.ts,它有两点有趣的信息。顶部附近是以下两行:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

这条线在底部附近:

return DateFormatter.format(value, defaultLocale, pattern);

这向我表明日期管道当前已被硬编码为“ en-US”。

如果我错了,请赐教。

在app.module.ts上添加以下导入。有区域设置选项列表在这里

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

然后添加提供者

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

在html中使用管道。这是有关角度的文档

{{ dateObject | date: 'medium' }}

您可以执行以下操作:

{{ dateObj | date:'shortDate' }}

要么

{{ dateObj | date:'ddmmy' }}

参见:https :
//angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

我在同一个问题上苦苦挣扎,因此无法使用此功能

{{dateObj | date:'ydM'}}

因此,我尝试了一种变通方法,不是最好的解决方案,但是它起作用了:

{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}

我总是可以创建一个自定义管道。

对于那些遇到AOT问题的人,您需要使用useFactory进行一些不同的处理:

export function getCulture() {
    return 'fr-CA';
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useFactory: getCulture },
    //otherProviders...
  ]
})

从Angular 9开始,本地化过程发生了变化。查看官方文档

请按照以下步骤操作:

  1. 添加本地化软件包(如果尚不存在): ng add @angular/localize
  2. 正如在文档中所说的:

Angular存储库包括通用语言环境。您可以通过在应用程序的工作区配置文件(angular.json)的sourceLocale字段中设置源语言环境来更改应用程序的源语言环境。构建过程(在本指南的“将翻译合并到应用程序”中进行了描述)使用您应用程序的angular.json文件自动设置LOCALE_ID令牌并加载区域设置数据。

因此,请按以下方式设置语言环境angular.json(可在此处找到可用语言环境的列表):

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "es"
      },
      ....
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          "configurations": {
            "production": {
             ...
            },
            "ru": {
              "localize": ["ru"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "test-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "test-app:build:production"
            },
            "ru":{
              "browserTarget": "test-app:build:ru"
            },
            "es": {
              "browserTarget": "test-app:build:es"
            }
          }
        },
        ...
      }
    },
    ...
  "defaultProject": "test-app"
}

基本上,您需要sourceLocalei18n部分中进行定义并添加具有特定语言环境的构建配置,例如"localize": ["es"]您也可以选择添加它,以便serve

  1. 使用build使用特定语言环境构建应用程序serveng serve --configuration=es

复制了Google管道,更改了语言环境,并且它适用于我的国家/地区,这很可能是他们没有针对所有语言环境完成的。下面是代码。

import {
    isDate,
    isNumber,
    isPresent,
    Date,
    DateWrapper,
    CONST,
    isBlank,
    FunctionWrapper
} from 'angular2/src/facade/lang';
import {DateFormatter} from 'angular2/src/facade/intl';
import {PipeTransform, WrappedValue, Pipe, Injectable} from 'angular2/core';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';


var defaultLocale: string = 'hr';

@CONST()
@Pipe({ name: 'mydate', pure: true })
@Injectable()
export class DatetimeTempPipe implements PipeTransform {
    /** @internal */
    static _ALIASES: { [key: string]: String } = {
        'medium': 'yMMMdjms',
        'short': 'yMdjm',
        'fullDate': 'yMMMMEEEEd',
        'longDate': 'yMMMMd',
        'mediumDate': 'yMMMd',
        'shortDate': 'yMd',
        'mediumTime': 'jms',
        'shortTime': 'jm'
    };


    transform(value: any, args: any[]): string {
        if (isBlank(value)) return null;

        if (!this.supports(value)) {
            console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
        }

        var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
        if (isNumber(value)) {
            value = DateWrapper.fromMillis(value);
        }
        if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern)) {
            pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
        }
        return DateFormatter.format(value, defaultLocale, pattern);
    }

    supports(obj: any): boolean { return isDate(obj) || isNumber(obj); }
}

好的,我提出了这个解决方案,非常简单,使用 ngx-translate

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
}

  transform(value: any): any {
    const date = new Date(value);

    const options = { weekday: 'long',
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit'
                    };

    return date.toLocaleString(this.translateService.currentLang, options);
  }

}

这可能有点晚了,但是在我的情况下(角度6),我在DatePipe的顶部创建了一个简单的管道,如下所示:

private _regionSub: Subscription;
private _localeId: string;

constructor(private _datePipe: DatePipe, private _store: Store<any>) {
  this._localeId = 'en-AU';
  this._regionSub = this._store.pipe(select(selectLocaleId))
    .subscribe((localeId: string) => {
      this._localeId = localeId || 'en-AU';
    });
}

ngOnDestroy() { // Unsubscribe }

transform(value: string | number, format?: string): string {
  const dateFormat = format || getLocaleDateFormat(this._localeId, FormatWidth.Short);
  return this._datePipe.transform(value, dateFormat, undefined, this._localeId);
}

可能不是最好的解决方案,但简单有效。

本文地址:http://javascript.askforanswer.com/ruhezaiangular-2dedatepipezhongshezhiyuyanhuanjing.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!