管道是用于转换模板中的数据(格式)的过滤器。
我遇到了如下pipe()
函数。在这种情况下,这个pipe()
功能到底意味着什么?
return this.http.get<Hero>(url)
.pipe(
tap(_ => this.log(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
不要混淆 Angular 和 RxJS 的概念
我们在 Angular 中有管道概念,在 RxJS 中有pipe()
函数。
1)角度管道:管道接收数据作为输入并将其转换为所需的输出
https://angular.io/guide/pipes
2)RxJS中的pipe()
函数:可以使用管道将运算符链接在一起。管道允许您将多个函数组合到单个函数中。
pipe()
函数将要组合的函数作为其参数,并返回一个新函数,该函数在执行时按顺序运行组合函数。
https://angular.io/guide/rx-library(在此URL中搜索管道,可以找到相同的)
所以根据你的问题,你指的是RxJS中的pipe()
函数
您在起始描述中谈论的管道与您在示例中显示的管道不同。
在 Angular(2|4|5) 中,管道用于格式化视图,如您所说。我想你对Angular中的管道有基本的了解,你可以从这个链接中了解更多信息 - 角度管道文档
您在示例中显示的pipe()
是RxJS 5.5的pipe()
方法(RxJS 是所有 Angular 应用程序的默认值)。在Angular5中,所有RxJS运算符都可以使用单个导入导入,现在它们使用管道方法组合在一起。
tap()
- RxJS 点击运算符将查看可观察值并使用该值执行某些操作。换句话说,在 API 请求成功后,tap()
运算符将执行您希望它通过响应执行的任何功能。在示例中,它只会记录该字符串。
catchError()
- catchError 做完全相同的事情,但有错误响应。如果你想抛出错误,或者想在收到错误时调用某个函数,你可以在这里做。在示例中,它将调用handleError()
,在其中,它将只记录该字符串。
两种非常不同类型的管道 角度 - 管道和RxJS - 管道
角管
管道接收数据作为输入,并将其转换为所需的输出。在此页面中,你将使用管道将组件的生日属性转换为人性化的日期。
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。然后,过滤器功能将结果过滤到仅奇数。
RxJS运算符是建立在可观察量基础上的函数,用于对集合进行复杂的操作。
例如,RxJS定义了诸如map()
、filter()
、concat()
和flatMap()
等运算符。
可以使用管道将运算符链接在一起。管道允许您将多个函数组合到单个函数中。
pipe()
函数将要组合的函数作为其参数,并返回一个新函数,该函数在执行时按顺序运行组合函数。
你必须看看官方的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