- 简介
这里简单的介绍了代码极简化，以及制定自己想要的功能通过自定义管道来实现。
2.语法
关闭Angular项目
新建管道：ng generate pipe pipes/string-pi
3.需求
image.png
让福利这一列最多显示10个字，然后超过10个的会显示 ...
4.代码
管道ts文件：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringPi'
})
//这个管道就是截断数据为10
export class StringPiPipe implements PipeTransform {
transform(value: any, args?: any): any {
args=args||10;
//方法一
// if(value){ //value不为空
// return value.length>10?value.substr(0,args)+'...':value;
// }
// return null;
//方法二
return value && value.length>10?value.substr(0,args)+'...':value;
}
}
调用：还是老套路，插值表达式，json点值，管道筛选
<td>{{info?.attraction | stringPi:10}}</td>
5.细解
首先在新建管道之后会拿到一个管道名字，一个架子，然后就是考验基本功的时候了。
这里使用了两种方法
方法一：
// if(value){ //value不为空
// return value.length>10?value.substr(0,args)+'...':value;
// }
// return null;
最传统的方法， 调用管道管道会返回 | 前面的值作为value ,不用管怎么来的反正就是拿到了，这里是info?.attraction 。
然后value接收之后使用一个三目运算符、一个substr成功截取
方法二：
return value && value.length>10?value.substr(0,args)+'...':value;
这一条语句就是使用了&&的特性（老师讲课与或非时可能说过:那个啥‘与’这个东西记住就行，先判断第一个值是否为true不是第二个值看都不用看肯定是返回false）。这里是先判断value是否为空，如果不是空就会执行？后面的代码。
这就是某些大神眼中的代码极简化追求。但是可读性大大的打折扣了。
还有这里调用管道时后面跟了个数：
<td>{{info?.attraction | stringPi:10}}</td>
这个数会被args拿到。然后你看到的又是一波骚操作：
args=args||10; //如果传入参数了就以传入的为准，没传就默认为10
