Edited at

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

More than 1 year has passed since last update.

結論テンプレート側ではできなかったです。

なのでコントローラ側でパイプなしで実装しました。さらに、それ用にカスタムパイプも作りました。


やりたかったこと

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>