``` 除了系統內置的管道，我們還可以自定義管道。 ``` 一、創建自定義管道類 >[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> ```