ngx-translateとDatePipeを組み合わせて使いたい時 (カスタムパイプもあるよ)

6197 ワード
Angular4 Ionic3 Angular2 ionic Angular Angular テキストリンク

結論テンプレート側ではできなかったです。
なのでコントローラ側でパイプなしで実装しました。さらに、それ用にカスタムパイプも作りました。

やりたかったこと

ngx-translateを使って、

言語 表記 フォーマット
日本語 2017年8月24日 YYYY年M月D日
英語 Aug 24, 2017 MMM DD, YYYY

こんな感じで表示の出し分けをしたくて、ngx-translateとdatePipeを強引に組み合わせて、以下みたいな感じで書いてみたところ。。。

<p>{{ date | date: {{ 'DATE_FORMAT' | translate }} }}</p>

通常 date: 'YYYY-MM-DD' ってするところを、強引にフォーマット部分に文字列を突っ込んでみましたが、ダメでした。やっぱダメかー。

そもそもそういう機能は無いみたいですねngx-translateには。

実装

なので、コントローラ側で実装してあげました。
DATE_FORMAT ていうのに、英語だと"MMM DD, YYYY", 日本語だと"YYYY年M月D日"という文字列が指定されてて、translate.get()で取得してきます。
translateっていうのはngx-translateのサービスのObjectですね。
ここらへんのngx-translate実装の詳細は以下を参考にして下さい。
http://qiita.com/jyjoestrummer/items/4ee5f28e0843bd7c70bb

ほんでDateのコードですが、こんな感じでコントローラ側で言語に応じて日付を整形します。

      // 日付を言語によって整形する
      this.translate.get("DATE_FORMAT").subscribe((res: string) => {
        let dateTranslated = moment(this.date).format(res);
        this.dateTranslated = dateTranslated;
      });

今回はionic3で実装しましたが、constructorとかionViewWillEnterで実行するようにしました。
以上っすわ〜。

追記　カスタムパイプ作りました

なんかいろんな画面で使う感じになったので、カスタムパイプにしました。

date-translated-pipe.ts
import { PipeTransform, Pipe } from '@angular/core';
import * as moment from 'moment';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

// 言語によってDateを整形するPipe
@Pipe({
  name: "dateTranslated"
})
export class DateTranslatedPipe implements PipeTransform {
  constructor(
    public translate: TranslateService) {
  }
  transform(date: string): string {
    let dateTranslated;
    this.translate.get("DATE_FORMAT").subscribe((res: string) => {
      dateTranslated = moment(date).format(res);
    });
    return dateTranslated;
  }
}

こんな感じで使います。

test-template.html
<p>{{ date | dateTranslated }}</p>
フロントエンドエラー処理とデバッグ
SpringシリーズAOP使用