1. 管道
管道能很好的封装和共享的通用“值-显示”转换逻辑。我们可以像样式一样使用它们，把它们扔到模板表达式中，以提升视图的表现力和可用性。
2. 内置管道(常用)
-
DatePipe
使用：date_expression | date[:format[:timezone[:locale]]]
如：{{nowDate | date='fullDate'}}
更多参数配置见：DatePipe -
JsonPipe
使用：{{object | json}}
说明：将值转换为json字符串，与JSON.stringify效果一样 -
LowerCasePipe、UpperCasePipe
使用：{{ string | lowercase(uppercase)}} -
TitleCasePipe
使用：{{string | titlecase}}
说明：字符串第一个字母大写 -
SlicePipe
使用：array_or_string_expression | [slice]):start[:end]
如：{{ string | slice:0:3}}
更多参数配置见：SlicePipe
3. 自定义管道
- 创建自定义管道
bigPipe.pipe.ts
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'bigPipe'
})
export class BigPipePipe implements PipeTransform {
transform(value: any, args?: any): any {
if (value > 10) {
return '大于10不显示';
}
return null;
}
}
- 使用管道
- 在组件所属模块declarations中导入
declarations: [
AppComponent,
BigPipePipe
],
- 在模板中使用
<p>{{ 20 | bigPipe}}</p>
输出<p>大于10不显示</p>
-
注意：
a. 使用@Pipe装饰器定义Pipe的 metadata 信息，如Pipe的名称 - 即 name 属性
b. 实现PipeTransform接口中定义的transforms 方法
