什么是 Angular 中的 pipe() 函数

Posted 2023-02-16

【中文标题】什么是 Angular 中的 pipe() 函数

【英文标题】：What is pipe() function in Angular

【发布时间】：2018-06-10 08:13:33

【问题描述】：

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

我遇到了pipe() 函数，如下所示。在这种情况下，这个pipe() 函数究竟意味着什么？

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

【问题讨论】：

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

@Ajay 我得到了这个页面和一堆对 | 的引用用途。哪个没有回答 rxjs 管道是什么。

【参考方案1】：

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

如您所说，在 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()，在其中，它只会记录该字符串。

【讨论】：

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

我把它收回，我是过失。忽略了那句话。我希望我可以撤消-1。 :(但不幸的是它被锁定了。

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

【参考方案2】：

不要混淆 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() 函数

【参考方案3】：

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

【参考方案4】：

RxJS 操作符是建立在 observables 基础上的函数，可以对集合进行复杂的操作。

例如，RxJS 定义了map()、filter()、concat()、flatMap() 等运算符。

您可以使用管道将运算符链接在一起。管道让您可以将多个函数组合成一个函数。

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

【讨论】：

你有例子吗？

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

【参考方案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

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。然后，过滤器函数将结果过滤为仅奇数。

【讨论】：

感谢您提供有关用法的日常示例。大多数其他答案只是关于 RxJS 的概念解释。