1. ホーム
  2. javascript

[解決済み] Angular 2のDatePipeでロケールを設定する方法は?

2022-04-22 08:56:33

質問

欧文書式で日付を表示したい dd/MM/yyyy が、DatePipeを使用して ショートデート のフォーマットは、米国の日付スタイルで表示されます。 MM/dd/yyyy .

デフォルトのロケールはen_USだと思うのですが。ドキュメントに記載がないかもしれませんが、Angular2アプリでデフォルトのロケール設定を変更するにはどうしたらよいでしょうか?あるいは、DatePipeにカスタムフォーマットを渡す方法があるのでしょうか?

解決方法は?

Angular2 RC6では、プロバイダを追加することで、アプリモジュールにデフォルトロケールを設定することができます。

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

Currency/Date/Numberパイプはロケールを拾う必要があります。LOCALE_ID は 不透明なトークン は、angular/coreからインポートする必要があります。

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

より高度な使用例としては、サービスからロケールを取得したい場合があります。ロケールは、日付パイプを使用するコンポーネントを作成する際に (一度だけ) 解決されます。

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

うまくいくことを祈っています。