网站快照不更新了,响应式网站制作教程,灵犀科技 网站开发佼佼者,软考中级哪个含金量高① 介绍1.1 基本用法1.2 管道参数1.3 链式管道1.4 纯管道1.5 非纯管道 ② 内置管道③自定义管道 ① 介绍 管道#xff1a;pipe 。在angular中处理组件模板的数据格式。管道操作符 | #xff0c;连接模板表达式中左边输入数据和右边的管道。 1.1 基本用法
例#xff1a;这里… ① 介绍1.1 基本用法1.2 管道参数1.3 链式管道1.4 纯管道1.5 非纯管道 ② 内置管道③自定义管道 ① 介绍 管道pipe 。在angular中处理组件模板的数据格式。管道操作符 | 连接模板表达式中左边输入数据和右边的管道。 1.1 基本用法
例这里使用了内置管道 date 对日期的显示做了美化
Pmy birthday is {{birthday}}/P !-- my birthday is Mon Feb 01 1993 00:00:00 GMT0800 (中国标准时间) --
pmy birthday is {{ birthday | date }}/p !-- my birthday is Feb 1, 1993 --birthday new Date(1993,1,1);1.2 管道参数
Pmy birthday is {{birthday | date:y-MM-dd EEEE}}/P !-- my birthday is 1993-02-01 Monday --
Pmy birthday is {{birthday | date:y/MM/dd EEEE}}/P !-- my birthday is 1993/02/01 Monday --birthday new Date(1993,1,1);1.3 链式管道
一个模板表达式中可以连续使用多个管道进行不同的处理。
Pmy 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
})② 内置管道
内置管道列举
序号管道名类型说明1Date纯管道日期管道格式化日期2Json非纯管道将输入数据对象经过JSON.stringify()方法转换后输出对象字符串3UpperCase纯管道将文本所有小写字母转成大写字母4LowerCase纯管道将文本所有大写字母转成小写字母5Decimal纯管道数值处理6Currency纯管道数值转成货币格式7Percent纯管道数值转成百分比格式8Slice非纯管道数组或字符串裁剪 ③自定义管道
需求:
指定字符串不能超过规定长度文字的长度超过规定的长度会被裁剪并且显示…省略号规定长度由管道参数决定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) ...;}}}组件模板中的应用
p{{今天是星期六呢 | clipString:6}}/p需要在declarations中声明
NgModule({imports: [CommonModule],declarations: [ClipStringPipe],exports: [SonComponent]
})
export class SonModule { }
