パイプラインとは何ですか? Angular でのパイプライン (PIPE) の簡単な分析

パイプラインとは何ですか?この記事では、Angular のパイプライン (PIPE) について紹介し、パイプラインをカスタマイズする方法について説明します。

パイプライン (PIPE) とは

PIPE、パイプラインと訳されます。 Angular Pipes は、HTML コンポーネントで宣言できる表示値変換を記述する方法です。 Angular パイプラインは、以前は AngularJS ではフィルターとして知られていましたが、Angular 2 以降はパイプとして知られています。パイプはデータを入力として受け取り、それを目的の出力に変換します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

簡単に言えば、Angular Pipes は、文字列、整数、日付などを含む入力を、必要に応じて変換するのに役立ちます。特定の形式に変換されてブラウザに表示されます。補間式を通じて、パイプラインを定義し、特定の状況でそれを使用できます。Angular では、さまざまな種類のパイプラインが提供されています。もちろん、パイプラインをカスタマイズすることもできます。

比較的単純な例を挙げると、日付形式は多様であり、秒を時、分、秒に変換するなど、パイプラインを介してさまざまな形式間で変換できます。

組み込みパイプ

前述したように、Angular はさまざまな種類のパイプを提供します。組み込みパイプライン: 組み込みパイプラインとは何か、およびその使用方法については、以下のコードを使用して説明します。

Time Pipelinedate

新しい Angular プロジェクトを作成し、new Date() をページに追加します。

<div>{{data}}</div>
...
export class AppComponent {
  title = &#39;my-app&#39;;
  data = new Date()
}

ページには現在時刻が表示されます:

次に、組み込みパイプラインを使用して時刻形式を変換できます。パイプラインには構文が必要です。変数の後に | シンボルを追加し、パイプライン

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

を宣言します。ここでは、date パイプラインを使用します。パイプラインの特定のパラメーターの詳細については、を参照してください。公式ドキュメントでは、変換できるすべての形式が紹介されています。

Angular - DatePipe

https://angular.cn/api/common/DatePipe#description

パイプラインを設定した後、参照します。プロセッサ内の時間が変更されました

その他のパイプライン

Angular は、通貨名の変更など、他のパイプラインも提供しますパイプ (通貨) の形式:

Angular - CurrencyPipe

https://angular.cn/api/common/CurrencyPipe

文字列を大文字に変換するパイプもあります:

<div>{{&#39;ASDasd&#39; | uppercase }}</div>

#Angular - UpperCasePipe

https: / /angular.cn/api/common/UpperCasePipe

カスタム パイプ

組み込みの場合に備えて、上記でいくつかの組み込みパイプを紹介しました。開発ニーズを満たすことができるパイプラインはないため、Angular ではカスタム パイプラインも提供しており、自分でパイプラインを定義し、入力の変換方法を定義できます。

Angular が提供するコマンド ラインを使用して、パイプラインをすばやく生成できます。

ng g p pipes/pipe-name

ここでは、testという名前のパイプラインを作成しました

After上記のコマンドを実行すると、カスタム パイプを含むパイプ フォルダーが src の下に作成されます。

その後、Angular がこれらのパイプをアプリに自動的に導入します。世界中のどこでもカスタム パイプを使用できるようになります。

パイプ フォルダーの下にパイプが表示されます。パイプは本質的にクラスです。ここでは、デコレータを使用してテストの名前を付けています。

このクラスでは、PipeTransfrom インターフェイスを実装する必要があります。つまり、transform メソッドが必要です。このメソッドでは、最初のパラメータはパイプに入力される入力で、2 番目のデータはパイプラインに入れたい入力 パイプラインによって渡されたパラメータは、パイプライン内の配列に入れられます。

这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

返回一个固定的字符串，并且在页面中去使用它

可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。

接下来我们实现一个简单的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

更多编程相关知识，请访问：编程视频！！

以上がパイプラインとは何ですか? Angular でのパイプライン (PIPE) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。