Angular中管道有什么用?特点是什么?怎么自定义管道?下面本篇文章带大家了解一下Angular中的管道,介绍一下自定义管道的方法,希望对大家有所帮助!一、管道的作用
方便我们在模板中对我们的数据进行格式化处理。【相关教程推荐:《angular教程》】
二、内置的常用管道
具体API参照官网查询使用
三、Angular管道特点
四、自定义管道三部曲
五、自定义管道项目实践
背景:
我们最近需要在IE11浏览器上跑我们的Angular项目,因为最开始没有考虑IE的兼容问题,使得其中最明显的一个问题得以暴露,我们的列表接口的时间列全都了。
因为接口返回的时间格式大多是“yyyy-MM-dd hh:mm:ss
”,为了避免一个旧数据格式的不统一我们还会在模板中使用DatePipe管道来再次格式化数据,但是在IE浏览器环境new Date("2020-12-12 13:10:54")
会提示无效的时间。
处理:
遗留:
管道类说明
import { DatePipe } from "@angular/common";
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "gDate", pure: true })
export class GDatePipe implements PipeTransform {
transform(value: any, ...args: any[]) {
let time = "";
if (this.isIE()) {
time = new DatePipe("en-US").transform(value.replace(/-/g, "/"), ...args);
} else {
time = new DatePipe("en-US").transform(value, ...args);
}
return time;
}
isIE(): boolean {
return "ActiveXObject" in window;
}
}
更多编程相关知识,请访问:编程入门!!
以上就是聊聊Angular中的自定义管道的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!