Angular 入门之 Pipe （看不懂？不会吧不会吧）

正确的理解编程的本质才能在早下班的同时卷死别人 - 麦克阿瑟

麦克阿瑟： 不，我没说过！

什么是Pipe

Pipe中文直译叫做管道。

Angular中提供了一种操作符，可以将一个数据用另外的方式展示，且不影响原始数据。就像一个管道一样，原始数据从一头流入，展示结果从另一端流出。且Pipe可以多个一起使用，就像管道一样多个相接，前一个管道的输出就是后一个管道的输入，最后一个管道的输出就是页面上的展示数据。形象且直观

如何使用Pipe

最常见的Pipe的使用方式就是在Template模版中使用，也就是HTML页面。

class ManComponent {
    who: string = 'tom';
}

<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.

class ManComponent {
    who: Observable<string> = of('Jerry'); // 忽略这里的of, 关于RxJS的相关知识，我们下节会讲
}

<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请戳👇这里

自定义Pipe

前面我们介绍了Angular提供的一些内置Pipe，但是这些Pipe毕竟有限，不能满足我们的工作需求。那么就需要我们来自己创建自己的Pipe了。

Angular CLI 提供了创建Pipe的命令 ng generate pipe [path/to/name],下面我们试着创建一个我们自己的Pipe.

ng generate pipe mr

先看一下执行结果：

创建了一个Pipe文件和一个测试文件，同时修改了app.module.ts文件。

我们先看被修改的app.module.ts 文件, 其实就是注册了一下新创建的Pipe.

import { MrPipe } from './mr.pipe';


@NgModule({
    declarations: [AppComponent, MrPipe],
    imports: [***],
    providers: [***],
    bootstrap: [AppComponent],
})
export class AppModule {}

然后我们再看一下新创建的mr.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mr'
})
export class MrPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

默认创建的Pipe肯定是不存在任何逻辑的，我们对他按照需求进行修改。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mr'
})
export class MrPipe implements PipeTransform {

  transform(value: string): string {
    return `Mr. ${value}`;
  }

}

不讲代码，先看效果。

<span>{{ who | async ｜ mr}} is the Man.</span>
<!-- 运行结果 -->
<span> Mr. Jerry is the Man.</span>

所以回头来看代码的话，我修改的东西非常简单，就是对输入的字符串加了一个前缀。

所以， transform函数的第一个参数，就是你使用Pipe的对象的值。 下面我们讲后面的参数们，之所以叫他们是因为后续的参数可以为多个。看例子：

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}`;
  }

}

<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,我们下期再见。