Angular 自定义管道

管道的作用就是将原始值进行转化处理，转换为所需要的值；

1. 新建sex-reform.pipe.ts文件

ng g pipe sex-reform

2. 编辑sex-reform.pipe.ts文件



import { Pipe, PipeTransform } form '@angular/core'; //引入PipeTransform是为了继承transform方法

@Pipe({ name: 'sexReform' }) //name属性值惯用小驼峰是写法, name的值为html中| 后面的名称

export class SexReformPipe implements PipeTransform {

    transform(value: string, args?: any): string {

        switch(value){

            case 'male': return '男';

            case 'female': return '女';

            default: return '雌雄同体';

        }

    }

}

3. 使用demo组件中使用自定义管道

// demo.component.ts

export Class DemoComponent {

    sexValue = 'male';

}

// demo.component.html

<span>{{ sexValue | sexReform }}</span>

// 浏览器输出

男

同@Component({})和@NgModel({})一样，@Pipe({})代表这是一个管道，里面定义了一组元数据，用来告诉angular这个管道是如何工作的；
每一个自定义管道都需要实现PipeTransform接口， transform方法用来对传入的值进行一系列处理，最后转化为需要的值后return即可；
transform()方法参数格式 - transform(value: string, args1: any, args2: any): value为传入的值（即为需要用此管道处理的值， | 前面的值）; args 为传入的参数(?:代表可选)；
html中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}

巴特西

Angular 自定义管道

管道的作用就是将原始值进行转化处理，转换为所需要的值；

1. 新建sex-reform.pipe.ts文件

2. 编辑sex-reform.pipe.ts文件

3. 使用demo组件中使用自定义管道

最新文章

热门文章