【Angular】07管道pipe

1、概念

管道的作用就是傳輸。不同的管道具有不同的作用。(其實就是處理資料)

​​

​angular​

​​中自帶的​

​pipe​

​函數

管道	功能
DatePipe	日期管道，格式化日期
JsonPipe	将輸入資料對象經過JSON.stringify()方法轉換後輸出對象的字元串
UpperCasePipe	将文本所有小寫字母轉換成大寫字母
LowerCasePipe	将文本所有大寫字母轉換成小寫字母
DecimalPipe	将數值按照特定的格式顯示文本
CurrentcyPipe	将數值進行貨币格式化處理
SlicePipe	将數組或者字元串裁剪成新子集
PercentPipe

2、用法

• {{ 輸入資料 | 管道 : 管道參數}} (其中‘|’是管道操作符)
• 鍊式管道 {{ 輸入資料 | date | uppercase}}
• 管道流通方向自左向右，逐層執行

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    // return null;
    return '>>>'+value+'>>>';
  }
}

export class STHomeComponent{
  dateStr: Date = new Date();
  nameStr: string = 'hEllo';
}
// 渲染結構
{{dateStr}}
<p>{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{nameStr | uppercase | lowercase}}</p>
<p>{{nameStr | test}}</p>