Angular のパイプライン (PIPE) について説明する記事

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

パイプライン (PIPE) とは

---

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

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

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

組み込みパイプ

---

前述したように、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

カスタム パイプ

上でいくつかの組み込みパイプを紹介しました。 -in パイプラインでは開発ニーズを満たせない場合、Angular ではカスタム パイプラインも提供します。パイプラインを自分で定義し、入力の変換方法を定義できます。

---

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

ng g p pipes/pipe-name

ここでは、test

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

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

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

在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。

这个 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 サイトの他の関連記事を参照してください。