[解決済み】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
ポリフィルを適用することで、問題を回避することができます。
こちらをご覧ください
関連質問
をクリックすると、より詳細な回答が得られます。
関連
-
[解決済み] Angular 2の@ViewChildアノテーションがundefinedを返す
-
[解決済み] Angular "未定義のプロパティ 'subscribe' を読み取ることができません".
-
[解決済み] Angular 5:"ControlContainerのプロバイダがありません"
-
[解決済み] ngForにフィルターをかけるには?
-
[解決済み] 安全でない値」の例外を発生させずに <iframe src="..."> を設定するにはどうしたらよいですか?
-
[解決済み] Angular HTMLバインディング
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】Angular-CLIでコンポーネントを作成し、特定のモジュールに追加する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] @viewChildが機能しない - プロパティnativeElementがundefinedで読み込めない
-
[解決済み】「ルーター・アウトレット」は既知の要素ではない
-
[解決済み] Angular "未定義のプロパティ 'subscribe' を読み取ることができません".
-
[解決済み] Angular 5:"ControlContainerのプロバイダがありません"
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] Angular 8 NgForはArray errorやAcces Control Allow originなどのIterableへのバインディングのみをサポートしています。
-
[解決済み] Angular 2.0 翻訳パイプが見つかりません。
-
[解決済み] ウェブストーム Must be lvalue」の意味するところ
-
[解決済み] Angular2の素材ダイアログに問題あり - @NgModule.entryComponentsに追加しましたか?
-
[解決済み] コードにパイプを使用することは可能ですか?