angular管道

在Angular中,管道(Pipes)可以按照开发者指定的规则将模板内的数据进行转换。 使用管道,需要用管道操作符|来连接模板表达式中左边的输入数据和右边的管道。 Angular根据业务场景,封装了一些常用的内置管道。

定义元数据

在使用@Pipe定义元数据之前必须从@angular/core中引入Pipe和pipeTransform。 通过@Pipe装饰器告诉Angular这是一个管道类,@Pipe的元数据有一个name属性,用来指定管道名称。

// sexreform.pipe.ts
import {Pipe,PipeTransform} from '@angular/core'
@Pipe({name:'sexreform'})
export class SexReform implements PipeTransform{
//....
}

实现transform方法

自定义的管道必须继承接口类PipeTransform,同时自定义管道必须实现PipeTransform接口的transform()方法,该方法的第一个参数为需要被转换的值,后面可以有若干个可选转换参数,该方法需要返回一个转换后的值。

export class SexReform implements PipeTransform{
    transform(val:string):string{
        switch(val){
            case 'male':return ‘男’;
            case 'female':return '女‘;
            default:return '未知性别';
        }
}
}

使用自定义管道

在组件模板中使用自定义管道之前,必须在@NgModule的元数据declarations数组中自定义管道。

import {SexReform} from 'pipes/sexreform.pipe'
@NgModule(
  {
    declarations:[SexReform]
  })

添加到declarations数组后,就可以在模板中像内置管道一样使用自定义管道了。

JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。