angualr学习之路-------------过滤器

目录

1.定义

2.自定义管道

2.1 自定义管道步骤

①创建管道class，实现转换功能

   ②在模块中注册管道   

   ③在模板视图中使用管道

3.实战练习

---

1.定义

angular 中的过滤器的本质是一个函数，接收原始数据转换为该数据的新的格式形式进行输出： 模式为：function(oldVal){ 处理 return newVal }

使用过滤器的模型 {{ 元数据 | 过滤器名}} ，可以按出过滤器在使用上是通过管道Pipe的形式去做的，底层本质是函数：function(oldVal){ 处理 return newVal }

2.自定义管道

2.1 自定义管道步骤

①创建管道class，实现转换功能

@Pipe({name='sex'})
export class SexPipe{
    transform(oldVal){
        return newVal}
    }

   ②在模块中注册管道   

        //app.module.ts 中的declarationso中注册

        declarations: [ SexPipe ]

   ③在模板视图中使用管道

        如 ：{{e.empSex |sex}}

说明：管道的transform方法除了val还可以接收其它参数，使用管道时使用冒号为这些参数赋值

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

3.实战练习

需求：

创建一个管道ZzmmPipe，可以接收一个可选参数：format，转换规则如下：

如果format值为'short'，则转换规则为：

10-党员   20-团员  30-群众

   如果format值为'long'，则转换规则为：

10-中国共产党党员  20-中国共青团团员  30-中国人民群众 

1-男，0-女

数据准备：
 

 模板加载：

管道生成 

 

 管道注册

 自定义transform 方法

模板中引用管道

效果展示