几种angular常用自定义的管道

几种angular常用自定义的管道

根据日期判断星期

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'formatDay'
})

export class FormatDayPipe implements PipeTransform {
    transform(value: any, format?: any): any {
        if (value !== undefined) {
            let weekArray = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
            let myDate = new Date(value);
            let week = weekArray[myDate.getDay()];
            return week;
        }
    }
}

日期格式转换（利用moment.js）

import { Pipe, PipeTransform } from '@angular/core';
declare let moment: any;

@Pipe({
    name: 'dateMoment'
})

export class DateMomentPipe implements PipeTransform {
    transform(value: any, format?: any): any {
        if (!value) {
            return '';
        }
        format = format || 'YYYY-MM-DD HH:mm';
        return moment(value).format(format);
    }
}

也可以用angular自带的date管道,其用法如下：

<span>发布时间：{{item?.startDate | date:'yyyy-MM-dd'}}</span> //'yyyy-MM-dd'为管道的args

显示格式转换

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'multidisplay'
})

export class MultistageDisplayPipe implements PipeTransform {
    constructor( private sanitizer: DomSanitizer ) { }
    transform(value: any, args?: any): any {
        if(value){
            let valueArr = value.split(",")
            let changedValue = valueArr.join("/")
             return changedValue;
        }
        
    }
}

过滤富文本

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'textFiltering'
})

export class TextFilteringPipe implements PipeTransform {
    constructor( private sanitizer: DomSanitizer ) { }
    transform(value: any, args?: any): any {
        value = value || '暂无获取内容';
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}