``` 除了系统内置的管道，我们还可以自定义管道。 ``` 一、创建自定义管道类 >[info] 在CLI输入命令：ng g pipe avatar(管道类名) > 输入命令后创建的管道类 `src/app/avatar.pipe.ts` ``` import { Pipe, PipeTransform } from '@angular/core'; //引入Pipe模块, @Pipe 装饰器表示这个一个管道 //PipeTransform模块的transform方法用于指定管道的逻辑 @Pipe({ name: 'avatar' //管道的名称 }) export class AvatarPipe implements PipeTransform { transform(value: any, args?: any): any { return null; } } ``` 二、实现管道的逻辑 ``` import { Pipe, PipeTransform } from '@angular/core'; //引入Pipe模块, @Pipe 装饰器表示这个一个管道 //PipeTransform模块的transform方法用于指定管道的逻辑 @Pipe({ name: 'avatar' //管道的名称 }) export class AvatarPipe implements PipeTransform { //在transform方法中实现管道的逻辑 //截取传递过来的字符串 transform(value: string): string{ return value.substring(0,3); } } ``` 三、实例一 > 多个页面显示用户头像 > 若是头像图片地址不存在则判断用户性别 > 根据用户性别显示默认的男女头像 > 若是性别和头像图片地址都不存在则显示默认的人形头像 ``` import { Pipe, PipeTransform } from '@angular/core'; //引入Pipe模块, @Pipe 装饰器表示这个一个管道 //PipeTransform模块的transform方法用于指定管道的逻辑 @Pipe({ name: 'avatar' //管道的名称 }) export class AvatarPipe implements PipeTransform { //定义性别数组 sexList: string[] = ['', '男', '女']; //定义头像数组 avatarList: string[] = ['http://47.95.229.160/images/default-avatar.png', 'http://47.95.229.160/images/boy.jpg', 'http://47.95.229.160/images/girl.jpg']; //transform方法实现管道的逻辑 //传递的参数可能是头像可能是性别 transform(value: any): string { let avatarUrl = ''; if (value === '男' || value === '女') { let index = this.sexList.indexOf(value); avatarUrl = this.avatarList[index]; } else { avatarUrl = value ? value : this.avatarList[0]; } return avatarUrl; } } ``` ### 使用自定义管道： ``` //使用短路运算传递参数,如果第一个值为true则传递第一个值，否则传递第二个值 // userInfo.avata||userInfo.sex就是传递给管道的参数，表示为如果有头像路径则传递头像路径，没有则传递性别。 <img src="{{userInfo.avatar||userInfo.sex | avatar}}" alt=""> export class AppComponent implements OnInit{ userInfo:object = { avatar:'', sex:'男' } } ``` 四：实例二 > 实现身份证部分隐藏 ``` import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'idNumber' }) //管道实现身份证部分隐藏 export class IdNumberPipe implements PipeTransform { transform(value: any): string { let idCard = value.replace(/(^\d{6}|\d{3})(\d{10})(\d{1})(\d{1}|X$)/, "$1**********$3$4"); return idCard; } } ``` ### 使用自定义管道： ``` <div class="idcard">{{'452721199812121235' | idNumber }}</div> ```