• Filter：过滤器，在视图View中呈现数据时显示为另一种格式
  • 过滤器是一个函数，function(odlVal){....return newVal}
  • 使用过滤器：{{oldVal | 过滤器名称}}
  • 在Angular2以后过滤器被命名为管道(Pipe)

  • 自定义管道的步骤：

    • 创建管道类，实现管道的数据转换功能
    • 声明注册自定义的管道
    • 在视图中使用管道

      1、自定义管道

      1.1、创建管道类

  • 根据文档，建议管道的命名规则为xxx.pipe.ts；在app根目录下创建一个管道类

  • 管道类使用@Pipe装饰器进行装饰，属性name表示管道使用时的名称
  • 在管道类中定义一个方法transform(oldVal){...return newVal}用来对数据的过滤处理

  • 管道类建议实现PipeTransform接口，可以帮助提示代码的编写，同时进行错误检查

    1. ================translatePipe.pipe.ts============
    2. //管道装饰器
    3. @Pipe({
    4. //管道名称
    5. name: "translate"
    6. })
    7. export class translatePipe implements PipeTransform{
    8. //管道中执行过滤任务的函数名称transform
    9. transform(oldVal: string, lang = 'zh'){
    10.     if (oldVal === 'OK_CODE'){
    11.       return lang === 'en' ? "succeed" : "成功";
    12.     } else {
    13.       return lang === 'en' ? "failed" : "失败";
    14.     }
    15. }
    16. }

    1.2、声明注册管道类

  • 在app.module.ts中注册声明自定义的管道类

    1. declarations: [
    2. AppComponent,
    3. //注册新增的管道
    4. translatePipe
    5. ]

    1.3、使用管道

  • 使用{{xxx | 管道名}}的方式调用管道对数据进行处理，Angular会自动调用管道类中的transform()方法对数据进行过滤

  • Augular中的管道传递参数使用:，语法{{xxx | 管道名:参数1:参数2}}

    1. <h1>{{'OK_CODE' | translate}}</h1>
    2. <h1>{{'ERROR_CODE' | translate:'en'}}</h1>

  • 查看运行结果

image.png

管道生成工具

  • Angular同时提供了管道的生成工具

  • 同样会自动生成对应的的管道类，且自动注册声明新建的管道

    1. C:\Users\92541\Desktop\sd-wan\myngapp01>ng g pipe cityPipe
    2. CREATE src/app/city-pipe.pipe.spec.ts (196 bytes)
    3. CREATE src/app/city-pipe.pipe.ts (221 bytes)
    4. UPDATE src/app/app.module.ts (1477 bytes)

    2、预定义管道

  • Angular中提供了一些预定义的管道，提供给我们使用，方便开发 | AsyncPipe | 从一个异步回执中解出一个值。 | | —- | —- | | CurrencyPipe | 将数字转换为货币字符串，并根据确定组大小和分隔符、小数点字符以及其他特定于区域设置的配置的区域设置规则进行格式化 | | DatePipe | 根据区域设置规则格式化日期值。 | | DecimalPipe | 根据数字选项和区域设置规则设置值的格式。区域设置决定组大小和分隔符、小数点字符以及其他特定于区域设置的配置。 | | I18nPluralPipe | 将值映射到根据语言环境规则对该值进行复数化的字符串。 | | I18nSelectPipe | 通用选择器，用于显示与当前值匹配的字符串。 | | JsonPipe | 把一个值转换成 JSON 字符串格式。在调试时很有用。 | | KeyValuePipe | 将 Object 或 Map 转换为键值对数组。 | | LowerCasePipe | 把文本转换成全小写形式。 | | PercentPipe | 将数字转换为百分比字符串，并根据确定组大小和分隔符、小数点字符以及其他特定于区域设置的配置的区域设置规则进行格式化 | | SlicePipe | 从一个 Array 或 String 中创建其元素一个新子集（slice）。 | | TitleCasePipe | 把文本转换成标题形式。 把每个单词的第一个字母转成大写形式，并把单词的其余部分转成小写形式。 单词之间用任意空白字符进行分隔，比如空格、Tab 或换行符。 | | UpperCasePipe | 把文本转换成全大写形式。 |