① 介绍
- 管道：pipe 。在angular中处理组件模板的数据格式。
- 管道操作符 | ，连接模板表达式中左边输入数据和右边的管道。
1.1 基本用法
例：这里使用了内置管道 date 对日期的显示做了美化
<P>my birthday is {{birthday}}</P> <!-- my birthday is Mon Feb 01 1993 00:00:00 GMT+0800 (中国标准时间) -->
<p>my birthday is {{ birthday | date }}</p> <!-- my birthday is Feb 1, 1993 -->
birthday = new Date(1993,1,1);
1.2 管道参数
<P>my birthday is {{birthday | date:"y-MM-dd EEEE"}}</P> <!-- my birthday is 1993-02-01 Monday -->
<P>my birthday is {{birthday | date:"y/MM/dd EEEE"}}</P> <!-- my birthday is 1993/02/01 Monday -->
birthday = new Date(1993,1,1);
1.3 链式管道
一个模板表达式中可以连续使用多个管道进行不同的处理。
<P>my birthday is {{birthday | pipeName1 | pipeName2 | pipeName3}}</P>
模板表达式的值“birthday”，通过管道pipeName1处理后在传递给pipeName2处理，一直到最后一个管道处理完毕，就输出链式管道处理的最终结果。
1.4 纯管道
- angular管道有两种变化检测机制，分别对应两种类型：纯管道和非纯管道。
- 默认为纯管道。
- 只有在检测到输入值发生纯变更时才会调用纯管道的transform() 方法来实现数据转换，在将数据更新到页面上。
- 纯变更：基本数据类型输入值的变更或对象引用的更改。（对象的引用检测方式比遍历对象内部所有属性值要快的多，angular使用的是对象引用的监测策略）
1.5 非纯管道
- angular管道有两种变化检测机制，分别对应两种类型：纯管道和非纯管道。
- 使用非纯管道，angular组件在每个变化监测周期都会调用非纯管道，并执行管道的transform() 方法来更新页面数据。
- 通过在管道元数据里将pure属性值设置为false来定义非纯管道
@Pipe({
name: 'test-pipe',
pure: false
})
② 内置管道
内置管道列举
| 序号 | 管道名 | 类型 | 说明 |
|---|---|---|---|
| 1 | Date | 纯管道 | 日期管道，格式化日期 |
| 2 | Json | 非纯管道 | 将输入数据对象经过JSON.stringify()方法转换后输出对象字符串 |
| 3 | UpperCase | 纯管道 | 将文本所有小写字母转成大写字母 |
| 4 | LowerCase | 纯管道 | 将文本所有大写字母转成小写字母 |
| 5 | Decimal | 纯管道 | 数值处理 |
| 6 | Currency | 纯管道 | 数值转成货币格式 |
| 7 | Percent | 纯管道 | 数值转成百分比格式 |
| 8 | Slice | 非纯管道 | 数组或字符串裁剪 |
③自定义管道
需求:
- 指定字符串不能超过规定长度，文字的长度超过规定的长度会被裁剪，并且显示…（省略号）
- 规定长度由管道参数决定
- substr() 语法: string.substr(start,length)。指定的是字符串的开始位置和长度
举例：
- 在页面上使用指令限制最多显示5个字，多余的截断并显示省略号。
定义管道：clipString
@Pipe({
name: 'clipString'
})
export class ClipStringPipe implements PipeTransform {
transform(value: string, limit: number): any {
if (!value) return null;
if (value.length > limit) {
return value.substr(0, limit) + "...";
}
}
}
组件模板中的应用文章来源：https://www.toymoban.com/news/detail-734281.html
<p>{{'今天是星期六呢' | clipString:6}}</p>
需要在declarations中声明文章来源地址https://www.toymoban.com/news/detail-734281.html
@NgModule({
imports: [
CommonModule
],
declarations: [
ClipStringPipe
],
exports: [SonComponent]
})
export class SonModule { }
到了这里，关于Angular-05:管道的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
