web-dev-qa-db-ja.com

Pipe()関数とは何ですか Angular 2?

パイプは、テンプレート内のデータ(フォーマット)を変換するためのフィルタです。

私は以下のようにpipe()関数に出会いました。この場合、このpipe()関数は正確にはどういう意味ですか?

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

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

RxJSのAngularとpipes()関数にパイプの概念があります

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

2) RxJSのpipe()関数 :パイプを使って演算子をリンクすることができます。パイプを使用すると、複数の機能を1つの機能にまとめることができます。

pipe()関数は、引数として結合したい関数を取り、実行時に合成された関数を順番に実行する新しい関数を返します。
https://angular.io/guide/rx-library (このURLでパイプを検索すると、同じものが見つかります)

だからあなたの質問によると、あなたはRxJSのpipe()関数を参照している

71

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

Angular(2 | 4 | 5)では、パイプはビューをフォーマットするために使用されます。 Angularのパイプについての基本的な知識があると思います。このリンクからその詳細を学ぶことができます - Angular Pipe Doc

例に示したpipe()は、 RxJS 5.5 pipe()メソッドです(RxJSは、すべてのAngularアプリケーションのデフォルトです)。 Angular5 では、すべての RxJS 演算子を単一のインポートを使用してインポートでき、それらはパイプメソッドを使用して結合されるようになりました。

tap() - RxJSのタップ演算子はObservableの値を調べてその値で何かをします。言い換えれば、成功したAPIリクエストの後、tap()演算子はあなたがそれに実行させたいすべての機能をレスポンスで実行します。例では、単にその文字列を記録します。

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

39
BhargavG

RxJS 演算子は、コレクションの洗練された操作を可能にするために、observablesの基礎に基づいて構築された関数です。

たとえば、RxJSはmap()filter()concat()flatMap()などの演算子を定義します。

パイプを使用して演算子を一緒にリンクできます。パイプを使用すると、複数の機能を1つの機能にまとめることができます。

pipe()関数は、引数として結合したい関数を取り、実行時に合成された関数を順番に実行する新しい関数を返します。

5
manoj

あなたは公式のReactiveXドキュメンテーションを見なければなりません: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operator.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
3