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装饰器的，紧接着该装饰器的类就是管道的管道类，官方文档中的管道部分的教程已经足够好而简洁，我在这里就直接引用了：管道

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

• 我们在模板中使用管道操作符——|（也就是一条竖线），来使