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中具有pipes()函数

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

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

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

Answer 4

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

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

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

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

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

什么是Angular 2中的pipe（）函数？

5 个答案: