Angular管道

最新推荐文章于 2024-04-30 12:14:06 发布

weixin_34277853

最新推荐文章于 2024-04-30 12:14:06 发布

阅读量80

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3412211/blog/898581

版权

2019独角兽企业重金招聘Python工程师标准>>>

管道（Pipe）可以对模板中的数据进行格式转换，这里讲一下管道的用法

管道

管道的基本用法如下，表达式经过管道后输出

{{ expression | pipeName }}

也可以这样，链式管道，表达式依次经过1、2、3号管道后输出结果

{{ expression | pipeName1 | pipeName2 | pipeName3 }}

自定义管道

自定义管道需要定义元数据和、实现transform方法

先引入Pipe和PipeTransform，@Pipe装饰符说明我们要定义的是个管道，PipeTransform来实现具体过程。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe(name: 'sexReform', pure: true)  //指定管道名称、纯管道or非纯管道(name: string, pure: boolean)
export class SexReform implements PipeTransform {
  transform(value: string, args?: any): string {
    switch(value) {                   //这里面不管用switch还是其他的任何表达式都可以，就相当与一个处理的过程
      case 'male': reture '男';
      case 'female': return '女';
      default: return '未知性别';
    }  
  }
｝                               //要使用自定义管道必须要像组件一样在模块中import并声明declaration

管道根据它们的变化监测机制，可以分为纯管道和非纯管道类型。

带参数的管道使用方法：

@Pipe(name: 'sexReform', pure: true)  //指定管道名称、纯管道or非纯管道(name: string, pure: boolean)
export class SexReform implements PipeTransform {
  transform(value: string, argA: any, argB: any) {
    ...
    ...

带参数的管道使用方法：
{{value | sexReform: argA: argB}}

纯管道

在模板表达式中使用纯管道（PurePipe），只有在监测到输入值发生纯变更时才会调用纯管道的transform（）方法来实现数据转换，从而将数据更新到页面上。纯变更是指对基本数据类型(String、Number、Boolean、Symbol)输入值的变更或对对象引用(Date、Array、Function、Object)的更改。

Angular会忽略(复合)对象内部的更改。如果我们更改了输入日期(Date)中的月份、往一个输入数组(Array)中添加新值或者更新了一个输入对象(Object)的属性，Angular都不会调用纯管道。

在自定义管道中元数据pure属性设为true