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 操作ガイド

推薦する

Vue はコンポーネント間の通信をどのように実装しますか?

目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...

JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)

最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...

Vueは複数列レイアウトドラッグを実装します

この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...

CSS で中空マスク レイヤーを実装するサンプル コード

この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...

Nginxはhttpとhttpsの両方のアクセスをサポートするために同じドメイン名を設定します

Nginx は同じドメイン名で構成されており、http と https の両方でアクセスできます。証...

Nginx を使用して DoNetCore を Alibaba Cloud にデプロイする方法

基本的な環境設定まずはご自身でドメイン名とサーバーを購入してくださいクラウドサーバーECSに基づいて...

RedisとMemcacheの比較と選び方

最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...

モバイルデバイスでインラインスクロールを実装するための4つのソリューションの詳細な説明

ニーズの発見領域の一部のみスクロールでき、残りの部分は移動できない場合、どのような方法を使用しますか...

Nginx ロードバランシングの設定方法

目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...

MySQL でトリガーを無効化および有効化するチュートリアル [推奨]

MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...

Hタグはウェブページ制作において適切に使用すべきである

HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...

DockerコンテナがSongtiなどのフォントを認識しない場合の解決策

問題の背景: docker を使用してプロジェクトをデプロイする場合、プロジェクト内で印刷コントロー...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...