什么是Angular中的pipe（）函数

108

管道是用于转换模板中数据（格式）的过滤器。

我遇到了pipe()如下功能。pipe()在这种情况下，此功能究竟意味着什么？

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

— 迪内什·夏尔马
source

2

github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

— Cartant

3

@Ajay我得到此页面以及对|的大量引用。用途。哪个不能回答什么是rxjs管道。

— 182764125216 '18年

123

不要与Angular和RxJS的概念混淆

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

1）Angular中的管道：管道将数据作为输入并将其转换为所需的输出
https://angular.io/guide/pipes

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

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

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

— 希瓦·纳亚克·达拉瓦斯
source

43

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

在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()，在其中，它将仅记录该字符串。

— 巴尔加夫
source

“您在开始描述中谈论的管道...”->不，它们没有什么不同。; 在我看来，他的问题很清楚（毫无疑问，如此可能）。编程中有很多概念可以称为“管道”，但由于他的描述非常具体，并称其为“管道功能”，因此消除了所有可能的混淆。我不知道他还能怎么给他们打电话。

— bvdb

1

“管道是用于转换模板中数据（格式）的过滤器。” 在这里，他谈论的是Angular 2+中的管道，例如日期，Angular中提供的大写管道（这正是他所说的，即在模板中格式化数据），并且在描述中他展示了RXJS管道函数的示例。是的，这两件事完全不同。

— BhargavG

我把它拿回来，Mea culpa。忽略了这句话。我希望我可以撤消-1。:(但不幸的是，它已被锁定

— 。– bvdb

没什么大不了的。很高兴它消除了所有疑问。干杯：-)

— BhargavG

15

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

例如，RxJS定义运营商，如map()，filter()，concat()，和flatMap()。

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

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

— 马诺伊
source

你有例子吗？

— lofihelsinki

在下面的示例中，我们通过管道传递了filter和map函数。现在，这两个函数将按示例提供的顺序执行。首先它将过滤结果，然后将结果映射。希望它会有所帮助。从'rxjs / operators'导入{filter，map}; 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

答案非常好，但不幸的是，投票数很少。向我+1。

— Ashok kumar，

7

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

— 亚历山大·萨克（Oleksandr Sachuk）
source

6

两种非常不同类型的管道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（）方法传入一个或多个运算符函数，这些函数可以对可观察集合中的每个项目进行处理和转换。

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

— 查理斯
source