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] 角形管道：管道将数据作为输入并将其转换为所需的输出https://angular.io/guide/pipes

2）RxJS中的[pipe()函数：您可以使用管道将运算符链接在一起。管道使您可以将多个功能组合为一个功能。

pipe()函数将要组合的函数作为其参数，并返回一个新函数，该函数在执行时将依次运行组成的函数。https://angular.io/guide/rx-library（在此URL中搜索管道，您可以找到相同的管道）

所以根据您的问题，您是指RxJS中的pipe()函数

Answer 2

在开始描述中谈论的管道与示例中显示的管道不同。

在Angular（2 | 4 | 5）中，管道用于格式化视图，如您所说。我认为您对Angular中的管道有基本了解，您可以从此链接中了解更多信息-Angular Pipe Doc

在示例中显示的pipe()是RxJS 5.5的pipe()方法（RxJS是所有Angular应用程序的默认设置）。在Angular5中，所有RxJS运算符都可以使用一次导入来导入，现在可以使用管道方法进行组合。

tap()-RxJS tap操作符将查看Observable值，并对该值进行处理。换句话说，在成功的API请求之后，tap()运算符将执行您希望其在响应中执行的任何功能。在示例中，它将仅记录该字符串。

catchError()-catchError完全相同，但有错误响应。如果要抛出错误或在遇到错误时要调用某个函数，则可以在此处执行。在该示例中，它将调用handleError()，在其中，它将仅记录该字符串。

Answer 3

RxJS运算符是在observables基础上构建的函数，用于实现对集合的复杂操作。

例如，RxJS定义了诸如map()，filter()，concat()和flatMap()的运算符。

您可以使用管道将运算符链接在一起。管道使您可以将多个功能组合为一个功能。

pipe()函数将要组合的函数作为其参数，并返回一个新函数，该函数在执行时将依次运行组成的函数。

Answer 4

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

Answer 5

两种非常不同类型的管道Angular-Pipes>]和RxJS-Pipes] >>

Angular-Pipe

管道接收数据作为输入，并将其转换为所需的输出。在此页面中，您将使用管道将组件的生日属性转换为对人类友好的日期。

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 - Pipe
可观察到的运算符是使用称为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

对于任何包含可观察变量的变量，我们可以使用.pipe（）方法传入一个或多个运算符函数，这些函数可以对可观察集合中的每个项目进行处理和转换。

因此，本示例将0到10范围内的每个数字乘以2。然后，使用filter函数将结果过滤为仅奇数。