Angular 自定義管道

管道的作用就是將原始值進行轉化處理，轉換為所需要的值；

---

1. 新建sex-reform.pipe.ts文件

ng g pipe sex-reform

2. 編輯sex-reform.pipe.ts文件

import { Pipe, PipeTransform } form '@angular/core'; //引入PipeTransform是為了繼承transform方法


@Pipe({ name: 'sexReform' }) //name屬性值慣用小駝峰是寫法, name的值為html中| 后面的名稱


export class SexReformPipe implements PipeTransform {
    transform(value: string, args?: any): string {
        switch(value){
            case 'male': return '男';
            case 'female': return '女';
            default: return '雌雄同體';
        } 
    }
}

3. 使用demo組件中使用自定義管道

// demo.component.ts
export Class DemoComponent {
    sexValue = 'male';
}

// demo.component.html
<span>{{ sexValue | sexReform }}</span>

// 瀏覽器輸出
男

• 同@Component({})和@NgModel({})一樣，@Pipe({})代表這是一個管道，里面定義了一組元數據，用來告訴angular這個管道是如何工作的；

• 每一個自定義管道都需要實現PipeTransform接口， transform方法用來對傳入的值進行一系列處理，最后轉化為需要的值后return即可；

• transform()方法參數格式 - transform(value: string, args1: any, args2: any): value為傳入的值（即為需要用此管道處理的值， | 前面的值）; args 為傳入的參數(?:代表可選)；

• html中使用管道格式 - {{ 數據 | 管道名 : 參數1 : 參數2 }}