1. ホーム
  2. アンギュラー

[解決済み】Angular - サービスとコンポーネントでパイプを使用する

2022-05-04 07:40:07

質問

AngularJSでは、以下のような構文で、サービスやコントローラの内部でフィルタ(パイプ)を使用することができます。

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

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

どのように解決するのですか?

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 に依存していましたが、これはすべてのブラウザでサポートされているわけではありません (Check the 互換性表 ).

古いバージョンのAngularを使用している場合は、Angularを起動するために Intl ポリフィルを適用することで、問題を回避することができます。 こちらをご覧ください 関連質問 をクリックすると、より詳細な回答が得られます。