美文网首页
angular常用管道指令(持续更新)

angular常用管道指令(持续更新)

作者: 甘道夫老矣 | 来源:发表于2023-12-03 12:01 被阅读0次

1.时间转换

import { Pipe, PipeTransform } from '@angular/core';
import moment from 'moment';

@Pipe({
    name: 'dateTime'
})
export class DateTimePipe implements PipeTransform {
    transform(date: any, type: number): any {
        let result: any;
        if (date) {
            if (type === 1) {
                result = moment(date).format('YYYY-MM-DD HH:mm:ss');
            } else if (type === 2) {
                result = moment(date).format('YYYY-MM-DD HH:mm');
            } else if (type === 3) {
                result = moment(date).format('YYYY-MM-DD');
            }
        }
        return result;
    }
}

//使用
<td>{{ data.lastLoginTime  | dateTime : 2 }}</td>

2.文件大小字节转换

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'sizeStr'
})
export class SizeStr implements PipeTransform {

    transform(size: number): any {
        if (size) {
            if (size < 1024) {
                return size + 'B';
            } else if (size >= 1024 && size < Math.pow(1024, 2)) {
                return parseFloat((size / 1024).toString()).toFixed(2) + 'KB';
            } else if (size >= Math.pow(1024, 2) && size < Math.pow(1024, 3)) {
                return parseFloat((size / Math.pow(1024, 2)).toString()).toFixed(2) + 'MB';
            } else if (size > Math.pow(1024, 3)) {
                return parseFloat((size / Math.pow(1024, 3)).toString()).toFixed(2) + 'GB';
            } else {
                return 0 + 'B';
            }
        } else {
            return 0;
        }
    }
}
//使用
{{ data.totalSpace?(data.totalSpace| sizeStr):0

3.文字长短tooltips判断

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'tooltips'
})
export class TooltipsPipe implements PipeTransform {

    transform(strName: any, len: number): any {
        let result: any;
        if (strName != null) {
            if (strName.length > len) {
                result = strName.substring(0, len) + '...';
            }
            else {
                result = strName;
            }
        }
        else {
            result = strName;
        }
        return result;
    }
}
//使用
 {{ item.name | tooltips: 35 }}

相关文章

网友评论

      本文标题:angular常用管道指令(持续更新)

      本文链接:https://www.haomeiwen.com/subject/gzbkgdtx.html