Angularのpipe（）関数とは

パイプは、テンプレート内のデータ（形式）を変換するためのフィルターです。

pipe()以下のような機能に出会いました。pipe()この場合、この機能は正確にはどういう意味ですか？

return this.http.get<Hero>(url)
  .pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
);

AngularとRxJSの概念と混同しないでください

Angularにはパイプの概念がありpipe()、RxJSには関数があります。

1）Angularのパイプ：パイプはデータを入力として受け取り、それを目的の出力に変換します
https://angular.io/guide/pipes

2）pipe()RxJSの関数：パイプを使用して演算子をリンクできます。パイプを使用すると、複数の関数を1つの関数に結合できます。

pipe()関数は、引数として、あなたが結合したい機能を取り、そして、実行されると、シーケンス内の構成機能を実行し、新しい機能を返します。
https://angular.io/guide/rx-library（このURLでパイプを検索すると、同じものが見つかります）

だからあなたの質問によれば、あなたはpipe()RxJSの機能を参照しています

最初の説明で話しているパイプは、例で示したパイプとは異なります。

Angular（2 | 4 | 5）では、パイプはあなたが言ったようにビューをフォーマットするために使用されます。あなたはAngularのパイプの基本を理解していると思います、このリンクから詳細について学ぶことができます-Angular Pipe Doc

pipe()あなたが例に示されているが、あるpipe()方法RxJS 5.5（RxJSは、すべての角のアプリケーションのデフォルトです）。Angular5全てRxJSのオペレータは、単一のインポートを使用してインポートすることができ、それらは現在、パイプ法を用いて合成されます。

tap()-RxJSタップオペレーターは、Observable値を調べ、その値を使用して何かを行います。つまり、API要求が成功した後、tap()オペレーターは応答で実行する必要のあるすべての機能を実行します。この例では、その文字列のみをログに記録します。

catchError()-catchErrorはまったく同じことを行いますが、エラー応答を伴います。エラーをスローしたい場合、またはエラーが発生した場合に関数を呼び出したい場合は、ここで実行できます。例では、それが呼び出されhandleError()、その中で、その文字列をログに記録します。

RxJSオペレーターは、コレクションの高度な操作を可能にするためにオブザーバブル基盤に構築される関数です。

例えば、RxJSのようなオペレータ定義map()、filter()、concat()、およびをflatMap()。

パイプを使用して、演算子をリンクできます。パイプを使用すると、複数の関数を1つの関数に結合できます。

pipe()関数は、引数として、あなたが結合したい機能を取り、そして、実行されると、シーケンス内の構成機能を実行し、新しい機能を返します。

ReactiveXの公式ドキュメントを確認する必要があります：https : //github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md。

これは、RxJSのパイプ処理に関する優れた記事です：https ://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 。

要するに.pipe（）は複数のパイプ可能な演算子をチェーンすることを可能にします。

バージョン5.5から、RxJSは「パイプ可能な演算子」を出荷し、一部の演算子の名前を変更しました：

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

2つの非常に異なるタイプのパイプAngular-PipesとRxJS-Pipes

角パイプ

パイプはデータを入力として受け取り、それを目的の出力に変換します。このページでは、パイプを使用してコンポーネントの誕生日プロパティを人にわかりやすい日付に変換します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

RxJS-パイプ

監視可能な演算子は、パイプ可能演算子と呼ばれるパイプ方法を使用して構成されます。例を示します。

import {Observable, range} from 'rxjs';
import {map, filter} from 'rxjs/operators';

const source$: Observable<number> = range(0, 10);

source$.pipe(
    map(x => x * 2),
    filter(x => x % 3 === 0)
).subscribe(x => console.log(x));

コンソールでのこの出力は次のようになります。

0

6

12

18

オブザーバブルを保持する変数の場合、.pipe（）メソッドを使用して、オブザーバブルコレクションの各項目を処理および変換できる1つまたは複数の演算子関数を渡すことができます。

したがって、この例では、0〜10の範囲の各数値を取り、2を乗算します。次に、フィルター関数を使用して、奇数のみに結果をフィルター処理します。