☰

Angular - サービスとコンポーネントでパイプを使用する 質問する

tag-icon • tag-icon angular
Angular - サービスとコンポーネントでパイプを使用する 質問する

AngularJS では、次のような構文を使用して、サービスとコントローラー内でフィルター (パイプ) を使用できます。

$filter('date')(myDate, 'yyyy-MM-dd');

Angular では、このようにサービス/コンポーネントでパイプを使用することは可能ですか?

ベストアンサー1

Angular では通常どおり、依存性注入に頼ることができます。

import { DatePipe } from '@angular/common';

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

モジュールのプロバイダー リストに追加しますDatePipe。これを忘れると、エラーが発生しますno provider for DatePipe。

providers: [DatePipe,...]

Angular 6のアップデート: Angular 6では、パイプで使用されるほぼすべての書式設定関数が公開されています。たとえば、formatDate直接機能します。

import { formatDate } from '@angular/common';

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

Angular 5以前DatePipe: ただし、バージョン5まではIntl APIに依存していましたが、これはすべてのブラウザでサポートされているわけではありません（互換性表）。

古いバージョンのAngularを使用している場合は、Intl問題を回避するためにプロジェクトにポリフィルを追加する必要があります。こちらをご覧ください関連する質問より詳しい回答については。

おすすめ記事