angular 管道,

　　管道在Angular中有什么用？有什么特点？如何定制管道？下面这篇文章带你了解Angular中的管道，并介绍自定义管道的方法。希望对你有帮助！

　　一、管道的作用

　　二、内置的常用管道

　　日期管道：格式化日期

　　UpperCasePipe:文本大写。

　　LowerCasePipe:文本全部小写。

　　TitleCasePipe:文本被转换成标题形式(例如，hello world=Hello World)

　　KeyValuePipe:将对象转换成键值对。

　　JsonPipe:转换为JSON字符串(在调试代码时仍然有用)

　　三、Angular管道特点

　　管道串联：将多条管道串联起来，对一个数据进行多次处理，得到最终结果。

　　流水线优先级：主要是提到流水线优先级高于三元表达式。如果需要管道来处理三元表达式的结果，请用括号将其括起来。

　　纯/不纯管道：

　　默认管道是纯管道，必须是纯函数。

　　底层类型和引用对象的引用发生变化时的纯管道执行。

　　复合对象改变(改变数组元素)时的非纯管道执行。

　　四、自定义管道三部曲

　　自定义pipeline类并实现PipeTransform接口。

　　通过@Pipe decorator将新创建的类声明为一个角形管道。

　　注入管道，比如在app.module.ts的声明数组中匹配新创建的管道类

　　五、自定义管道项目实践

　　背景：

　　最近需要在IE11浏览器上运行我们的Angular项目，因为一开始没有考虑IE的兼容性，暴露了一个最明显的问题。我们列表界面的时间栏都没有了。

　　由于接口返回的时间格式多为“yyyy-MM-dd hh:mm:ss”，为了避免一个旧的数据格式不一致，我们还会使用模板中的DatePipe管道重新格式化数据，但是在IE浏览器环境NewDate (2020-12-13: 10: 54 )中，会提示时间无效。

　　处理：

　　通过搜索可以得到很多一致的解，就是把年、月、日中间的“-”换成“/”。

　　我考虑的解决方案是通过自定义管道来扩展DatePipe，在自定义管道中加入判断浏览器环境来处理日期字符串。

　　遗留：

　　遗留的问题是，全球替代的风险仍然有点高。如果有切实可行的方案，请大家给点意见。

　　管道类说明

　　Transform函数是从PipeTransform接口实现的，参数值是我们需要处理的数据，参数args是要格式化什么样式。

　　我们可以通过return返回处理过的数据。

　　通过Angular的模块需要注册和使用。

　　从“@angular/common”导入{ date pipe }；

　　从“@angular/core”导入{ Pipe，Pipe transform }；

　　@Pipe({ name: gDate ，pure: true })

　　导出类GDatePipe实现PipeTransform {

　　transform(值：any，args: any[]) {

　　设时间=“”；

　　if (this.isIE()) {

　　time=新日期管道( en-US )。transform(value.replace(/-/g，/)，args)；

　　}否则{

　　time=新日期管道( en-US )。转换(值，args)；

　　}

　　返回时间；

　　}

　　isIE(): boolean {

　　在窗口中返回“ActiveX object”；

　　}

　　}更多编程相关知识请访问：编程入门！以上就是以Angular来说说自定义管道的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。