管道

管道用与在显示数据的时候做一些处理，然后在输出来，

应用场景

1. 例如显示时间的时候需要将时间的格式处理，让可读性更高

2. 例如由于Angular提供了防注入的风险，在数据绑定的时候会把html字符串当做普通的字符串输出，如果需要显示html字符串所对应的功能，那么需要调用DomSanitizer类的bypassSecurityTrustHtml方法，在考虑到复用性和方便性的时候，可以将其作为一个管道，来进行处理

内置管道

在Angular中有一些管道是由Angular已经提供好了，例如 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe,不需要实现，只需要使用就可以了

以DatePipe为例子

//pipe-demo.component.ts
export class PipeDemoComponent implements OnInit {nowDate: Date = new Date();}

<p>{{nowDate | date}}</p>

不适用管道输出为Tue Jun 18 2019 15:00:53 GMT+0800 (中国标准时间)，使用管道之后输出为Jun 18, 2019，对于这种形式阅读感觉还不是特别好，所以可以添加一些参数

<p>{{date | date:"yyyy-MM-dd HH:mm:ss"}}</p>

这时候输出为2019-06-18 15:04:43,其中的-、和:都是自己定义的，当是yyyy这些是固定的，不能够更改，修改间隔

<p>{{date | date:"yyyy/MM/dd HH:mm:ss"}}</p>

有关更多日期格式的用法请参考这篇博客https://blog.csdn.net/u011763994/article/details/78747587

自定义管道

管道是可以自定义的

1. 使用@Pipe为管道取个名字,例如为管道取名为exponentialStrengthPipe

@Pipe({name: 'exponentialStrengthPipe'
})

2. 实现PipeTransform类，并重写transform方法

3. 在declarations数组中添加该管道

创建管道

1. 使用命令创建

ng generate pipe html

使用命令之后就在app目录下创建了一个管道,初始代码如下

// html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'html'
})
export class HtmlPipe implements PipeTransform {transform(value: any, args?: any): any {return null;}}

可以看到在app.module.ts文件中declarations数组新增了ExponentialStrengthPipePipe

// app.module.tsimport { HtmlPipe } from './pipe/html.pipe';@NgModule({declarations: [//....HtmlPipe],
})

如果不使用命令创建也可以，但所有的步骤不能够少

2. 添加一个构造函数

// html.pipe.tsconstructor(private domSanitizer: DomSanitizer) {}

3. 重写transform方法

// html.pipe.tstransform(value: any, args?: any): any {return this.domSanitizer.bypassSecurityTrustHtml(value);}

4. 使用

# pipe-demo.component.html<div [innerHTML]="htmlDate | html"></div>

//pipe-demo.component.tshtmlDate: any = '<h2>hell world</h2>';

这样，一个自定义的管道就完成了