Angular9入门（4）自定义管道

Angular9入门（4）自定义管道

angular中管道是干啥的：

每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。 获取数据可能简单到创建一个局部变量就行，也可能复杂到从 WebSocket 中获取数据流。

一旦取到数据，你就可以把它们原始值的 toString 结果直接推入视图中。 但这种做法很少能具备良好的用户体验。 比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。

显然，有些值最好显示成用户友好的格式。你很快就会发现，在很多不同的应用中，都在重复做出某些相同的变换。 你几乎会把它们看做某种 CSS 样式，事实上，你也确实更喜欢在 HTML 模板中应用它们 —— 就像 CSS 样式一样。

通过引入 Angular 管道（一种编写"从显示到值"转换逻辑的途径），你可以把它声明在 HTML 中。

官方中文文档：https://angular.cn/guide/pipes

内置的管道

Angular 内置了一些管道，比如 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe。 它们全都可以直接用在任何模板中。

自定义管道

你可以使用cli命令来创建一个管道：ng g pipe pipename
这样就会在app 文件夹中创建了你的管道文件：

同时在app.module.ts文件中自动添加了你的管道：

修改我们的管道，让他把传入的数字自动加1 处理。
numberadd.pipe.ts 文件，

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

@Pipe({
  name: 'numberadd'
})
export class NumberaddPipe implements PipeTransform {

  transform(value: number, ...args: unknown[]): unknown {
    return value + 1;
  }

}

然后在你的页面模板中就可以像内置管道一样使用它了，

<p>{{ 10 | numberadd }}</p> // 输出11

使用cli指令会简化你创建管道的速度，但是你也可以自己直接创建，在app/commom/pipe文件夹下创建一个welcome管道。

第一步：添加文件，编写代码。

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

@Pipe({
    name: 'welcome'
})
export class WelcomePipe implements PipeTransform {

    transform(value: unknown, ...args: unknown[]): unknown {
        return 'Welcome to ' + value;
    }

}

第二步：手动修改app.module.ts文件。
导入管道，然后再decl中添加它。

第三步：在模板中使用它：

{{ 'China' | welcome }}

，输出：Welcome to China。

注意：在使用cli命令的时候，是可以指定路径的：ng g pipe common/pipe/hello。这就是指定了hello的路径为common/pipe。命令创建的spec.ts文件是测试用的文件，可以忽视不管，或者在创建的时候加上--skipTests=true

看清api的变化以及默认值。