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}`))
);

- Dinesh Sharma

---

@Ajay，我找到了这个页面和一堆关于使用的参考资料。但这并没有回答什么是rxjs管道。 - 182764125216

Answer 1

不要混淆Angular和RxJS的概念。

在Angular中有管道的概念和RxJS中的pipe()函数。

1) Angular中的管道: 管道将数据作为输入，将其转换为所需的输出。
https://angular.io/guide/pipes 2) RxJS中的pipe()函数: 您可以使用管道将操作符连接在一起。管道让您将多个函数组合成单个函数。
pipe()函数以要组合的函数作为其参数，并返回一个新函数，当执行时按顺序运行组合的函数。
https://angular.io/guide/rx-library (在此URL中搜索管道，您可以找到相同的内容)

因此，根据您的问题，您正在引用RxJS中的pipe()函数。

- Shiva Nayak Dharavath

Answer 2

您在开始描述中提到的“Pipes”与您在示例中展示的“pipe”是不同的。

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

您在示例中展示的pipe()是RxJS 5.5的pipe()方法（RxJS是所有Angular应用程序的默认值）。在Angular5中，现在可以使用单个导入导入所有RxJS运算符，并使用管道方法将它们组合起来。

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

catchError() - catchError实际上也是相同的，但是处理错误响应。如果您想抛出错误或想要在获取错误时调用某个函数，可以在此处执行。在该示例中，它将调用handleError()，在其中仅记录该字符串。

- BhargavG

---

“管道是用于在模板中转换数据（格式）的过滤器。” 这里他谈到的是 Angular 2+ 中的管道，例如日期、大写字母管道提供了 Angular（确切地说就是在模板中格式化数据）。在描述中，他展示了 RXJS 管道函数的示例。所以这两个东西完全不同。 - BhargavG

我收回之前的话，是我的错。我忽略了那个短语。我希望我能撤销那个负一分 :( 但很遗憾它已经被锁定了。 - bvdb

这并不是什么大问题。很高兴它解决了所有的疑虑。干杯 :-) - BhargavG

Answer 3

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

Angular 管道

管道以数据作为输入并将其转换为所需的输出。在本页面中，您将使用管道将组件的生日属性转换为人性化日期。

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

使用管道操作符来组成可观察对象操作符。下面是一个例子。

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。然后，使用筛选函数将结果筛选为只有奇数。

- CharithJ

---

感谢您提供关于使用方法的每日示例。在涉及 RxJS 的时候，大多数其他答案只是概念解释。 - themefield

将结果筛选为仅可被三整除的数字。 - riskop

Answer 4

RxJS操作符是在可观测对象的基础上构建的函数，可以实现对集合的复杂操作。

例如，RxJS定义了map（），filter（），concat（）和flatMap（）等操作符。

您可以使用管道将操作符链接在一起，这样可以将多个函数组合成单个函数。

pipe()函数接受要组合的函数作为其参数，并返回一个新函数，当执行时，按顺序运行组合函数。

- manoj

---

你有例子吗？ - lofihelsinki

在下面的例子中，我们已经将filter和map函数串联起来。现在两个函数将按照示例所提供的顺序依次执行。首先它会过滤结果，然后它会映射这些结果。希望这会有所帮助。 导入 { filter，map } from 'rxjs/operators'; const squareOdd = of(1, 2, 3, 4, 5)   .pipe(     filter(n => n％2！== 0),     map(n => n * n)   );// 订阅以获得值 squareOdd.subscribe(x => console.log(x)); - manoj

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已经推出了“pipeable operators”并重命名了一些运算符：

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

- Oleksandr Sachuk