angular2自定义管道省略字符

要求是中文的时候显示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}}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值