Angular Pipe管道理解及用法

忘是亡心i 2022-05-15 08:24 451阅读 0赞

### 1.什么是Pipe? ###

就是管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)

### 2.pipe用法 ###

\{ \{ 输入数据 | 管道 : 管道参数\}\} (其中‘|’是管道操作符)

### 3.Angular自带的pipe函数 ###

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> 管道 </td> 
 <td style="vertical-align:top;width:207.4pt;"> 功能 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> DatePipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 日期管道，格式化日期 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> JsonPipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> UpperCasePipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将文本所有小写字母转换成大写字母 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> LowerCasePipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将文本所有大写字母转换成小写字母 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> DecimalPipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将数值按照特定的格式显示文本 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> CurrentcyPipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将数值进行货币格式化处理 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> SlicePipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将数组或者字符串裁剪成新子集 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:207.4pt;"> PercentPipe </td> 
 <td style="vertical-align:top;width:207.4pt;"> 将数值转百分比格式 </td> 
 </tr> 
 </tbody> 
</table>

例如: person.name | uppercase

左边和右边都有对应的数据。person.name是一个容器，容器装了一个name，当name碰到管道之后会把name给uppercase，uppercase的作用就是把name转换。左边输出 右边接收，右边再输出。

### 4.简单使用pipe自带函数 ###

html(不使用管道的情况)

My birthday is {
 {birthday}}

typescript

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      birthday = new Date(2018, 6, 13);
    }

运行结果:

![70][]

这样的结果用户看到了估计直接头大了是吧。

html(使用pipe后)

My birthday is {
 {birthday|date}}

结果

![70 1][]

5.自定义管道:

首先打开Node.js cd到项目文件夹下

输入指令 ng g pipe pipe-name

成功后会出现两个文件:

pipe-name.pipe.spec.ts //测试

pipe-name.pipe.ts //用来写自定义pipe

pipe-name.pipe.ts

transform(value: any，args?: any):any{
    
           //transform是方法名
    
    //第一个参数value 是带过滤的内容
    
           //第二个参数是第一个参数处理的条件，也就是参数
    
    }

例如:

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({
      name: 'filter'
    })
    export class FilterPipe implements PipeTransform {
    
      transform(subject: any, cource: any): any {
        if (!cource) {
          return subject;
        }
        return subject.filter(function (subjects) {
          return subjects.toLowerCase().includes(cource.toLowerCase());   //实现模糊查询
        });
      }
    }

这个管道的作用是搜索包含关键字的内容

[70]: /images/20220515/f3c9c12a20c94cb58cc203884cc9fb8d.png
[70 1]: /images/20220515/76aa93146bac42a9a670e7f4edba3579.png