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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Angular2のパイプの使い方
  • Angular2 パイプライン パイプとカスタム パイプライン形式のデータ使用例の分析

<<:  Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。

>>:  MySQL 5.7 における基本的な JSON 操作ガイド

推薦する

MySQL の厄介な Aborted 警告をケーススタディで分析する

この記事では主に、MySQL の Aborted アラームに関する関連コンテンツを紹介し、参考と学習...

Linux および CentOS (サーバー) に zip および unzip コマンド機能をインストールする

Linux に zip 解凍機能をインストールする通常、 zip コマンドは Linux サーバーに...

Docker クロスサーバー通信オーバーレイソリューション (パート 1) Consul 単一インスタンス

目次シナリオタスクアイデア分析するコンセプトと選択ちょっとしたテスト環境説明予防実践テスト引用シナリ...

macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...

HTML はモバイル上で固定フローティング半透明検索ボックスを実装します

質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

MySQL InnoDB アーキテクチャの概要

目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...

入力ボックスのコンテンツプロンプトと非表示機能を実装する JavaScript

入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいこ...

CentOS 7 でゲートウェイを変更して IP を設定する方法の例

Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...

ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。

序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...

CSS リスト モデルでのマーカー タグの使用

この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...