AngularパイプラインPIPEの紹介と使い方

序文

PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言できる表示値の変換を記述する方法です。 Angular パイプは、以前は AngularJS ではフィルターと呼ばれていましたが、Angular 2 以降ではパイプと呼ばれるようになりました。パイプラインはデータを入力として受け取り、それを目的の出力に変換します。

Angular Pipes は、整数、文字列、配列、日付を | で区切って入力し、必要な形式に変換してブラウザーに表示します。補間式では、パイプを定義して、必要に応じて使用することができます。Angular アプリケーションで使用できるパイプには多くの種類があります。

組み込みパイプライン

文字列 -> 文字列
- 大文字パイプ
- 小文字パイプ
- タイトルケースパイプ
数値 -> 文字列
- 小数パイプ
- パーセントパイプ
- 通貨パイプ
オブジェクト -> 文字列
- JsonPipe
- 日付パイプ
ツール
- スライスパイプ
- 非同期パイプ
- I18n複数パイプ
- I18n選択パイプ

使い方

大文字変換

<div>
  <p ngNonBindable>{{ 'Angular' | 大文字 }}</p>
  <p>{{ 'Angular' | 大文字 }}</p> <!-- 出力: ANGULAR -->
</div>

日付の書式設定

<div>
  <p ngNonBindable>{{ 今日 | 日付: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- 出力: 現在の時刻に基づき、出力形式は 10:40 AM -->
</div>

数値の書式設定

<div>
  <p ngNonBindable>{{ 3.14159265 | 数値: '1.4-4' }}</p>
  <p>{{ 3.14159265 | 数値: '1.4-4' }}</p> <!-- 出力: 3.1416 -->
</div>

JavaScript オブジェクトのシリアル化

<div>
  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- 出力: { "name": "semlinker" } -->
</div>

パイプラインパラメータ

パイプラインは、パイプライン名の後に : とパラメータ値を追加することで、任意の数のパラメータを受け入れることができます。たとえば、number: '1.4-4' です。複数のパラメータを渡す必要がある場合は、コロンで区切ります。具体的な例は次のとおりです。

<div>
  <p ngNonBindable>{{ 'semlinker' | スライス:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- 出力: sem -->
</div>

パイプラインチェーン

<div>
  <p ngNonBindable>{{ 'semlinker' | スライス:0:3 | 大文字 }}</p>
  <p>{{ 'semlinker' | スライス:0:3 | 大文字 }}</p>
</div>

カスタムパイプライン

以下では、以前のプロジェクトで使用したパイプラインを例として、パイプラインをカスタマイズする手順を説明します。

@Pipeデコレータを使用して、パイプの名前（つまり、名前属性）などのパイプのメタデータ情報を定義します。
PipeTransformインターフェースで定義された変換メソッドを実装する

意味

"@angular/core" から Pipe、PipeTransform をインポートします。

@Pipe({ 名前: "formatError" })
エクスポートクラス FormatErrorPipe は PipeTransform を実装します {
    コンストラクタ() {}

    変換(値: 任意、モジュール: 文字列) {
        if (値.コード) {
            戻り値.desc;
        } それ以外 {
            戻り値.メッセージ;
        }
    }
}

使用

<div *ngIf="エラーメッセージ">
    <div class="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
        {{errorMessage.error | formatError:"auth"}}
    </div>
</div>

要約する

Angular パイプ PIPE に関するこの記事はこれで終わりです。Angular パイプ PIPE に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: