要求是中文的时候显示10个字符,英文的时候显示20个字符,不知道怎么具体实现,就想到了管道
下面是实现方法
1.自定义实现一个管道功能,继承了方法,还处在看api的状态,具体怎么实现的还没弄清楚
2.transform参数的方法
首先声明管道,继承方法transform,如图所示,除了第一个是传过来的具体参数,其余都是自己随意定的参数。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'fiterCodeLength'
})
export class FiterCodeLengthPipe implements PipeTransform {
transform(value: any, wordwise?: any, max?: any, tail?: any): any {
}
}
3.具体功能实现省略字符
首先根据中英文转换获取字符具体的长度,然后根据长度来截取字符
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'fiterCodeLength'
})
export class FiterCodeLengthPipe implements PipeTransform {
transform(value: any, wordwise?: any, max?: any, tail?: any): any {
if (!value) return '';
max = max == undefined ? 20 : parseInt(max, 10);
var length = this.getChars(value);
if (length <= max) return value;
let i = 0; let c = 0; let rstr = '';
// 开始取
for (i = i; c < max; i++) {
let unicode = value.charCodeAt(i);
if (unicode < 127) {
c += 1;
} else {
c += 2;
}
rstr += value.charAt(i);
}
return rstr + (tail || ' …');
}
getChars(str) {
var length = 0.0;
var unicode = 0;
if (str == null || str == "") {
return 0;
}
var len = str.length;
for (var i = 0; i < len; i++) {
unicode = str.charCodeAt(i);
if (unicode < 127) { //判断是单字符还是双字符
length += 1;
} else { //chinese
length += 2;
}
}
return length;
}
}
4.页面具体实现方法
// 传参的形式,用:隔开
{{data.Cust_Name|fiterCodeLength:true:16}}