angular中如何自定义一个管道

原文链接：https://www.longkui.site/program/frontend/pipe/4408/

0.背景
上传附件的一个功能，返回的附件URL太长，比如　upload/images/st/20220320图片.png。想把返回的URL进行裁剪只显示最后的文件名称。于是想到了angular中的自定义管道。

1.过程
选择合适的位置进行管道创建，一般大项目都有自定义管道的位置。我们找到要创建的位置，使用下面的指令进行管道创建

ng g pipe pipe/dog
说明，第一个pipe 表明是要创建管道，第二个pipe是文件夹名称，dog是我给管道起的名字。创建好后，你就会看到自动生成了下面这两个文件：

我们打开dog.pipe.ts文件，把我们管道的功能进行填写。参考下面的代码，中间的功能可以随便填写

import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({
name: ‘dog’ //管道名称
})
export class DogPipe implements PipeTransform {
//将附件URL进行 裁剪
transform(value: any, args?: any): any {
//下面是管道内的方法，value是参数。
// args 可以为空，
if (value == null) {
return null
}
let realName = “”
realName = value.slice(value.lastIndexOf(“/”) + 1)
return realName
}
}
然后在xxxx.module.ts中，引入我们刚创建的管道。如果你是全局的，那么就是app.module.ts，如果你是自定义的module,那么就是你自定义的名称. xxx .module.ts

然后我们在HTML页面引用刚才的管道

  <td>{{data.energyConservationInstructionsAttachment | dog}}</td>

类似于下面这样，我们把鼠标放到管道上，可以看到提示的代码。

最后，页面上显示的数据，就是我们经过管道裁剪的数据了。