Angular7入门辅助教程（四）——管道

如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇

在Angular中我们可以使用下面命令来快速创建一个管道

ng generate pipe 管道名

例如，我要创建一个名叫helloworld的管道

ge generate pipe helloworld

这时，Angular CLI会在src/app目录下面创建两个文件：helloworld.pipe.ts，和helloworld.pipe.spec.ts（管道的测试文件）,不但如此，Angular CLI还会自动将该管道类加入AppModule的元数据对象的declarations数组中！

helloworld.pipe.ts内容如下

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'helloworld'
})
export class HelloworldPipe implements PipeTransform {transform(value: any, args?: any): any {return null;}}

Angular中的管道是带有@Pipe装饰器的，紧接着该装饰器的类就是管道的管道类，官方文档中的管道部分的教程已经足够好而简洁，我在这里就直接引用了：管道

我在这里对管道先做一个简单的介绍

• 我们在模板中使用管道操作符——|（也就是一条竖线），来使用管道，例如，使用Angular内置的json管道来格式化输出：<p>{ { hero | json }} </p>就表示将hero这个对象输出为json格式，并显示在屏幕上
• 管道接受一个输入，我们可以对这个输入进行转化，并返回输出结果
• 我们可以使用Angular内置管道，也可以自己自定义管道，详细内容请参考官方教程：管道
• 我们可以串联一系列的管道，从而对数据进行一系列的转换，在这种情况下，前一个管道的输出是后一个管道的输入
• 管道可以接受参数，管道与参数、参数之间以:(冒号)的方式分隔