什么是 Angular 中的 pipe() 函數

Question

管道是用於轉換模板中數據（格式）的過濾器。

我遇到了pipe()函數，如下所示。 在這種情況下，這個pipe()函數究竟意味着什么？

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

Answer 1

不要混淆 Angular 和 RxJS 的概念

我們在 Angular 中有管道概念，在 RxJS 中有pipe()函數。

1) Angular 中的管道：管道將數據作為輸入並將其轉換為所需的輸出
https://angular.io/guide/pipes

2) RxJS 中的pipe()函數：您可以使用管道將操作符鏈接在一起。 管道使您可以將多個功能組合成一個功能。

pipe()函數將要組合的函數作為其參數，並返回一個新函數，該函數在執行時按順序運行組合函數。
https://angular.io/guide/rx-library （在這個網址搜索pipe，可以找到相同的）

所以根據你的問題，你指的是 RxJS 中的pipe()函數

Answer 2

您在開始描述中談論的管道與您在示例中顯示的管道不同。

在 Angular(2|4|5) 中，如您所說，管道用於格式化視圖。 我認為您對 Angular 中的管道有基本的了解，您可以從此鏈接了解更多相關信息 - Angular Pipe Doc

所述pipe()已在所示的例子中是pipe() RxJS 5.5的方法（RxJS為所有角應用默認值）。 在Angular5 中，所有RxJS操作符都可以使用單個導入來導入，現在使用管道方法將它們組合起來。

tap() - RxJS tap 運算符將查看 Observable 值並使用該值執行某些操作。 換句話說，在成功的 API 請求之后， tap()運算符將執行您希望它對響應執行的任何功能。 在示例中，它只會記錄該字符串。

catchError() - catchError 做同樣的事情，但有錯誤響應。 如果你想拋出一個錯誤或者想在遇到錯誤時調用某個函數，你可以在這里完成。 在這個例子中，它會調用handleError()並且在里面，它只會記錄那個字符串。

Answer 3

RxJS操作符是建立在 observables 基礎上的函數，可以對集合進行復雜的操作。

例如，RxJS 定義了map() 、 filter() 、 concat()和flatMap()等操作符。

您可以使用管道將運算符鏈接在一起。 管道使您可以將多個功能組合成一個功能。

pipe()函數將要組合的函數作為其參數，並返回一個新函數，該函數在執行時按順序運行組合函數。

Answer 4

兩種截然不同的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 - 管道

Observable 操作符是使用一種稱為 Pipeable Operators 的管道方法組成的。 這是一個例子。

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

對於任何持有 observable 的變量，我們可以使用 .pipe() 方法傳入一個或多個運算符函數，這些函數可以處理和轉換 observable 集合中的每個項目。

所以這個例子取 0 到 10 范圍內的每個數字，並將其乘以 2。然后，過濾器函數將結果過濾到僅奇數。

Answer 5

您必須查看官方 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