Angularのパイプをモデル内で使う

7354 ワード
Angular4 Angular Angular テキストリンク

Angularでは日時のフォーマット操作を行う方法としてpepeが提供されています。
このパイプは、 Viewにバインドされたオブジェクトや変数に対して、| で、パイプして使います。
今回は、DatePipeに用意されているtransformというメソッドを使って、 |でパイプせずに、モデル(serviceやcomponent)内で使う方法を紹介します。

通常の使い方

その前に通常の使い方をおさらい

datepipe-test.component.html(view側)
<p>{{date}}</p>
<p>{{date | date: 'y/MM/dd (EE) HH:mm'}}</p>
datepipe-test.component.ts(model側)
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-datepipe-test',
  templateUrl: './datepipe-test.component.html',
  styleUrls: ['./datepipe-test.component.css']
})
export class DatepipeTestComponent implements OnInit {
  private date: Date;

  constructor() { }

  ngOnInit() {
    this.date = new Date;
  }
}

次のように、dateの表示結果がフォーマットされる

モデル内で使う方法

事前に、app.module.ts内でDatePipeをprovidersに登録する

app.module.ts
import { DatePipe } from '@angular/common';
...
providers: [DatePipe,...]
datepipe-test.component.html(view側)
<p>{{date}}</p>
<p>{{formattedDate}}</p>
datepipe-test.component.ts(model側)
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-datepipe-test',
  templateUrl: './datepipe-test.component.html',
  styleUrls: ['./datepipe-test.component.css']
})
export class DatepipeTestComponent implements OnInit {
  private date: Date;
  private formattedDate: string;

  // DatePipeをインジェクトする
  constructor(private datePipe: DatePipe) { }

  ngOnInit() {
    this.date = new Date;
    this.formattedDate = this.datePipe.transform(this.date, 'y/MM/dd (EE) HH:mm');
  }
}

通常の使い方と同様に、dateの表示結果がフォーマットされる