Angular中的管道

Angular同在在模板文件中使用一些管道，这些管道是用来对字符串、货币金额、日期等数据进行转换和格式化的。管道的本质是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个按一定规则转换后的值。

Angular内置管道

• **DatePipe：**根据本地环境中的规则格式化日期值。
• **UpperCasePipe：**把文本全部转换成大写输出。
• **LowerCasePipe：**把文本全部转换成小写输出。
• **CurrencyPipe：**把数字转换成货币字符串，根据本地环境中的规则进行格式化。
• **DecimalPipe：**把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
• **PercentPipe：**把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

使用管道：

上面列举了Angular中内置的几个管道，接下来在代码中用一个简单的UpperCasePipe演示如何使用管道：

管道操作符是|，在一个模板表达式中通过这个|符号表明这个表达式中使用了管道，|符号的前面是输入值，后面是管道的名称，Angular根据所使用的的管道，通过对应的逻辑规则对表达式输入值进行计算，然后返回一个结果并进行显示：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h1>{{ text | uppercase}}</h1>
  <h1>{{ text}}</h1>
  `
})
export class AppComponent {
  text = 'Hello World!'
}

使用参数和管道链格式化数据

开头提到过，Angular中的管道实质上就是一个函数，所以它可以接受一个可选的参数，并按照这个参数对表达式输入值进行逻辑处理，这个参数也可以是一个返回值为字符串的函数，比如下面的DatePipe，

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
  <h1>{{ birthday}}</h1>
  <h1>{{ birthday | date}}</h1>
  <h1>{{ birthday | date: format()}}</h1> 
  <h1>{{ birthday | date: 'yyyy-MM'}}</h1>
  <h1>{{ birthday | date: 'yyyy-MM-HH'}}</h1>
  `
})
export class AppComponent {
  birthday = new Date();

  format(){
    return 'shortDate'
  }
}

使用管道链对数据进行格式化时，前面一个管道返回的结果将作为参数传递给后面的管道：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h1>{{ birthday}}</h1>
  <h1>{{  birthday | date:'fullDate' | uppercase}}</h1>
  `
})
export class AppComponent {
  birthday = new Date();
}

自定义管道

管道的本质是一个函数，既然这样我们就可以自定义一个类，在这个类中定义一个函数进行数据逻辑的处理，然后使用@Pipe()装饰器把它标记为管道，这样一个自定义的管道就创建好了，在NgModule中引入之后就可以使用这个管道了。

我在这里定义一个接受number型数据，并把输入值乘以十倍之后返回的管道：
1、首先创建一个类，命名为MultiplyByTenPipe，然后让这个类继承PipeTransform接口并实现一个transform方法，这个transform方法使用管道输入值作为第一个参数，把其它任何参数都以列表的形式作为第二个参数，并返回转换后的值。
2、使用@Pipe()装饰器将这个类声明为一个管道，并在元数据中定义管道的名称multiplybyten。
3、把管道包含在 NgModule 元数据的 declarations 字段中，以便于本模块中可以使用这个管道。

// MultiplyByTenPipe类
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: 'multiplybyten'
})

export class MultiplyByTenPipe implements PipeTransform{
    transform(value: any, ...args: any[]) {
        return value * 10;
    }
}

// AppModule 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MultiplyByTenPipe } from './pipes/multiplyByTenPipe';

@NgModule({ // @NgModule() 装饰器 实际上是一个函数，接受一个元数据 
  declarations: [ // 可声明对象表： 声明属于本模块的组件、指令、管道
    AppComponent,
    MultiplyByTenPipe
  ],
  exports: [ // 导出表：在其他模块的组件中也可以使用是可声明对象，一般是可声明对象的子集
    
  ], 
  imports: [ // 导入表： 
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }