几种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);
}
}