Angular7-pipes
Angular7-パイプ
この章では、Angular 7のパイプについて説明します。 パイプは以前、Angular1ではフィルターと呼ばれ、Angular2以降ではパイプと呼ばれていました。
|文字はデータの変換に使用されます。 以下は、同じ構文です-
入力として整数、文字列、配列、および日付を|で区切って受け取ります。必要に応じて形式に変換し、ブラウザで同じものを表示します。
パイプを使用したいくつかの例を考えてみましょう。 ここでは、大文字で指定されたテキストを表示します。 これは、次のようにパイプを使用して行うことができます-
app.component.tsファイルでは、次のようにタイトル変数を定義しています-
次のコード行は app.componentl ファイルに入ります-
次のスクリーンショットに示すようにブラウザが表示されます-
ここに角度付きで利用可能ないくつかの組み込みパイプがあります-
- 小文字パイプ
- 大文字パイプ
- デートパイプ
- 通貨パイプ
- ジョンソンパイプ
- パーセントパイプ
- デシマルパイプ
- スライスパイプ
小文字と大文字のパイプはすでに見ました。 他のパイプがどのように機能するかを見てみましょう。 次のコード行は、 app.component.ts ファイルで必要な変数を定義するのに役立ちます-
以下に示すように、 app.componentl ファイルでパイプを使用します-
次のスクリーンショットは、各パイプの出力を示しています-
カスタムパイプを作成する方法?
カスタムパイプを作成するために、新しいtsファイルを作成しました。 ここでは、sqrtカスタムパイプを作成します。 私たちはファイルに同じ名前を付けており、次のように見えます-
カスタムパイプを作成するには、Angular/coreからPipe and Pipe Transformをインポートする必要があります。 @Pipeディレクティブで、パイプに名前を付ける必要があります。これは、lファイルで使用されます。 sqrtパイプを作成しているので、sqrtという名前を付けます。
さらに先に進むと、クラスを作成する必要があり、クラス名はSqrtPipeです。 このクラスはPipeTransformを実装します。
クラスで定義された変換メソッドは、引数として数値を取り、平方根を取った後に数値を返します。
新しいファイルを作成したので、同じものを app.module.ts に追加する必要があります。 これは次のように行われます-
以下は出力です-