正确的理解编程的本质才能在早下班的同时卷死别人 - 麦克阿瑟
麦克阿瑟： 不，我没说过！
什么是Pipe
Pipe中文直译叫做管道。
Angular中提供了一种操作符，可以将一个数据用另外的方式展示，且不影响原始数据。就像一个管道一样，原始数据从一头流入，展示结果从另一端流出。且Pipe可以多个一起使用，就像管道一样多个相接，前一个管道的输出就是后一个管道的输入，最后一个管道的输出就是页面上的展示数据。形象且直观
如何使用Pipe
最常见的Pipe的使用方式就是在Template模版中使用，也就是HTML页面。
typescript
class ManComponent {
who: string = 'tom';
}
html
<span>{{ who | uppercase }} is the Man.</span>
<!-- 运行结果 -->
<span> TOM is the Man.</span>这其中的 变量 ｜ Pipe 就是Angular中Template使用Pipe的方式。
Angular内置Pipe有哪些
Angular 内置了一些十分常见的Pipe覆盖了部分的常见需求了，例如上面提到的UpperCasePipe,以及与之对应的LowerCasePipe，还有涉及到时间的DatePipe,涉及到数字精度的DecimalPipe,展示对象的JsonPipe等等等等。
这里我们重点介绍一个Pipe,也是我们在实际开发中使用最多的 AsyncPipe.
AsyncPipe的官方解释叫做 "Unwraps a value from an asynchronous primitive" 直译意思是"从异步基元中解包值"，说人话就是获取异步的值。
对于大多数前程序员而言最常见的异步元是Promise，但是对于Angular而言最常见的异步元是Observable.
Talk is cheap, show me the code.
typescript
class ManComponent {
who: Observable<string> = of('Jerry'); // 忽略这里的of, 关于RxJS的相关知识，我们下节会讲
}
html
<span>{{ who | async }} is the Man.</span>
<!-- 运行结果 -->
<span> Jerry is the Man.</span>
<!-- 多Pipe一起使用 -->
<span>{{ who | async ｜ uppercase}} is the Man.</span>
<!-- 运行结果 -->
<span> JERRY is the Man.</span>上面就是关于AsyncPipe的使用方式，至于Promise能不能用AsyncPipe来获取值，留作自己动手的小例子。
自定义Pipe
前面我们介绍了Angular提供的一些内置Pipe，但是这些Pipe毕竟有限，不能满足我们的工作需求。那么就需要我们来自己创建自己的Pipe了。
Angular CLI 提供了创建Pipe的命令 ng generate pipe [path/to/name],下面我们试着创建一个我们自己的Pipe.
cmd
ng generate pipe mr先看一下执行结果：
创建了一个Pipe文件和一个测试文件，同时修改了app.module.ts文件。
我们先看被修改的app.module.ts 文件, 其实就是注册了一下新创建的Pipe.
typescript
import { MrPipe } from './mr.pipe';
@NgModule({
declarations: [AppComponent, MrPipe],
imports: [***],
providers: [***],
bootstrap: [AppComponent],
})
export class AppModule {}然后我们再看一下新创建的mr.pipe.ts
typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'mr'
})
export class MrPipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}默认创建的Pipe肯定是不存在任何逻辑的，我们对他按照需求进行修改。
typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'mr'
})
export class MrPipe implements PipeTransform {
transform(value: string): string {
return `Mr. ${value}`;
}
}不讲代码，先看效果。
html
<span>{{ who | async ｜ mr}} is the Man.</span>
<!-- 运行结果 -->
<span> Mr. Jerry is the Man.</span>所以回头来看代码的话，我修改的东西非常简单，就是对输入的字符串加了一个前缀。
所以， transform函数的第一个参数，就是你使用Pipe的对象的值。 下面我们讲后面的参数们，之所以叫他们是因为后续的参数可以为多个。看例子：
typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'mr'
})
export class MrPipe implements PipeTransform {
transform(value: string, prefix1: string, prefix2: string): string {
return `${prefix1}. ${prefix2}. ${value}`;
}
}
html
<span>{{ who | async ｜ mr: 'Super': "Hero"}} is the Man.</span>
<!-- 运行结果 -->
<span> Super. Hero. Jerry is the Man.</span>所以，明白了吗？
补充
前面我在讲Pipe在Template中的使用的时候说，这是其中的一种用法，所以其实还有另外的一种用法。
那就是将Pipe引入到Component 或者Service中直接调用 transform方法。就相当于当一个util方法使用。
好了，以上就是我们本次更新的全部内容了~
Mien, 6年前端开发经验，目前就职于SLB。 涉猎范围： Angular, Vue, React, 小程序, Three.js, Cesium.js, Babylon.js, electron, Taruri, nodeJS, Rust以及一些乱七八糟的技术 欢迎留言提问和指正。
我是Mien,我们下期再见。