angular4.x学习笔记--管道（相当于1.x中的filter过滤器）

╰半夏微凉° 2022-05-28 01:11 132阅读 0赞

## 管道（过滤器） ##

管道其实就是过滤器，就是叫法不一致而已。主要用于格式化源数据，而不改变源数据。定义和使用的方式也很简单：

import { Pipe, PipeTransform } from '@angular/core'; 
    
    /*
     * 订单取消状态：默认为ALL表示全部，CANCEL表示已取消，NOTCANCEL表示正常
    */
    @Pipe({ name: 'cancelStatus' })
    export class CancelStatusPipe implements PipeTransform {
        transform(status:string, blank: boolean):string {
             const map = {
                 "ALL": "全部", 
                 "NOTCANCEL": "正常",
                 "CANCEL": "已取消",
                  "": "暂无",  
             }
    
             return blank? '特殊情况': map[status];
        }
    }

使用前记得在模块的`declarations`声明，或者导到共享模块，在共享模块中导出去。使用如下：

{
       { "ALL" | cancelStatus }}  // 全部
    {
       { "ALL" | cancelStatus: true }}  // 特殊情况

Angular内置了一些管道：

// 日期 DatePipe
    {
       { expression | date:"MM/dd/yy" }} 
    
    // 数字 DecimalPipe,digitInfo的组成 {minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
    // minIntegerDigits：整数部分保留最小的位数，默认值为1.
    // minFractionDigits：小数部分保留最小的位数，默认值为0.
    // maxFractionDigits：小数部分保留最大的位数，默认值为3.
    {
       { expression | number[:digitInfo] }}
    
    // 大写
    {
       { expression | uppercase }}
    
    // 小写
    {
       { expression | lowercase }}

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220528/78944312649a4cbcae6134866d652134.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/beb780778509415aa125999e28a5ad89.png