1. 程式人生 > >Angular非常簡單的一個自定義管道

Angular非常簡單的一個自定義管道

*一個簡單過濾性別的自定義管道詳解*
建立一個名為sex管道  ng g pipe sex

以下是sex.pipe.ts中程式碼
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sex'
})
export class SexPipe implements PipeTransform {

  transform(value: any, args?: any): any {
  	//value 管道前面的值    
    	//sex:1   args管道傳過來的引數既args=1
    if(value == 1){ 
      return '男'
    }else{
      return '女'
    }
  }

}

下面是HTML和檢視

<h2>
  {{1|sex}}</h2><hr>

<h2>
  {{0|sex}</h2><hr>

<h2>
  {{0|sex}}</h2><hr>
<h2>
  {{1|sex}}</h2>

在這裡插入圖片描述