Angular の PIPE (パイプライン) についての深い理解

angular では、パイプを使用して入力データを処理でき、異なるパイプには異なる機能があります。では、具体的にはどのようにパイプを使用するのでしょうか?次の記事では、Angular の PIPE (パイプライン) について詳しく説明し、その使用方法を説明します。

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

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

【関連チュートリアルの推奨事項: "angular チュートリアル"】

組み込みパイプライン

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• ##Number -> String

  • ##DecimalPipe

  • PercentPipe

  • CurrencyPipe

• オブジェクト -> String

  • JsonPipe

  ##DatePipe

  #ツール

• SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

  ##使用方法

大文字変換

<div>
  <p ngNonBindable>{{ &#39;Angular&#39; | uppercase }}</p>
  <p>{{ &#39;Angular&#39; | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

ログイン後にコピー

日付の書式設定

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

ログイン後にコピー

数値の書式設定

<div>
  <p ngNonBindable>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p>
  <p>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p> <!-- Output: 3.1416 -->
</div>

ログイン後にコピー

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

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

ログイン後にコピー

パイプライン パラメーター

パイプは任意の数のパラメーターを受け取ることができます。使用方法は、パイプ名の後に # を追加することです。 ##: とパラメータ値。たとえば、

、複数のパラメータを渡す必要がある場合、パラメータをコロンで区切る必要があります。具体的な例は次のとおりです:

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <!-- Output: sem -->
</div>

ログイン後にコピー

複数のパイプラインを接続してパイプライン チェーンを形成し、データを処理できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;div&gt; &lt;p ngNonBindable&gt;{{ &amp;#39;semlinker&amp;#39; | slice:0:3 | uppercase }}&lt;/p&gt; &lt;p&gt;{{ &amp;#39;semlinker&amp;#39; | slice:0:3 | uppercase }}&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

以下では、カスタム パイプラインの手順を説明するために、過去のプロジェクトで使用されたパイプラインを例として使用します:

##@Pipe デコレータを使用して、Pipe

metadata

Pipe
• の名前など)、つまり

  name 属性 実装PipeTransform インターフェイスで定義された transform メソッド

• ##定義

  <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { Pipe, PipeTransform } from &quot;@angular/core&quot;; @Pipe({ name: &quot;formatError&quot; }) export class FormatErrorPipe implements PipeTransform { constructor() {} transform(value: any, module: string) { if (value.code) { return value.desc; } else { return value.message; } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>使用

  <div *ngIf="errorMessage">
      <div class="message-box error mb-16" [@animate]="{value:&#39;*&#39;,params:{opacity:&#39;0&#39;,duration:&#39;200ms&#39;}}">
          {{errorMessage.error | formatError:"auth"}}
      </div>
  </div>

  ログイン後にコピー
  終了~

  プログラミング関連の知識については、

  プログラミング教育

  をご覧ください。 ！

  以上がAngular の PIPE (パイプライン) についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。