Angular组件与模板之管道
管道
管道用与在显示数据的时候做一些处理，然后在输出来，
应用场景
-
例如显示时间的时候需要将时间的格式处理，让可读性更高
-
例如由于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
自定义管道
管道是可以自定义的
- 使用@Pipe为管道取个名字,例如为管道取名为
exponentialStrengthPipe
@Pipe({
name: 'exponentialStrengthPipe'
})
-
实现
PipeTransform类，并重写transform方法 -
在
declarations数组中添加该管道
创建管道
- 使用命令创建
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.ts
import { HtmlPipe } from './pipe/html.pipe';
@NgModule({
declarations: [
//....
HtmlPipe
],
})
如果不使用命令创建也可以，但所有的步骤不能够少
- 添加一个构造函数
// html.pipe.ts
constructor(private domSanitizer: DomSanitizer) {
}
- 重写
transform方法
// html.pipe.ts
transform(value: any, args?: any): any {
return this.domSanitizer.bypassSecurityTrustHtml(value);
}
- 使用
# pipe-demo.component.html
<div [innerHTML]="htmlDate | html"></div>
//pipe-demo.component.ts
htmlDate: any = '<h2>hell world</h2>';
这样，一个自定义的管道就完成了
