分享更有价值
被信任是一种快乐

Angular中的管道怎么自定义

文章页正文上

本篇内容介绍了“Angular中的管道怎么自定义”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!PIPE,翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器,从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。
简单来说,就是 Angular Pipes 可以帮我们把我们的输入,包括字符串,整数和日期等等,按照我们的需要转化为特定的格式并且在浏览器中显示。通过插值表达式,我们可以定义管道并且在特定的情况下使用它,在 Angular 中提供给了我们许多种不同类型的管道,当然,你甚至还可以去自定义管道。举一个比较简单的例子,日期的格式是多种多样的,你可以通过管道,进行各种格式之间的转化,比如把秒数转化为时分秒。上面提到了,Angular 中提供给了我们许多种不同类型的管道,这些都是属于 Angular 的内置管道,至于内置管道都有什么,要怎么用,下面通过代码来演示一下。
我们新建一个 Angular 项目,并且在页面中添加一个 new Date()

{{data}}
... exportclassAppComponent{ title='my-app'; data=newDate() }

页面就会显示当前的时间:那么我们接下去就可以使用内置的管道来进行一个时间格式的转化,管道的语法需要在变量后面添加 | 符号,并且声明管道

{{data|date:'yyyy-MM-dd'}}

这里我们用到了 date 这个管道,关于管道具体的参数详情可以看一下官方文档,里面介绍了它所提供的所有给你转化的时间格式。在我们设置好管道之后,浏览器中的时间已经发生了变化了Angular还提供了其他管道,比如说改变人名币格式的管道(currency):还有将字符串转化为大写的管道(uppercase):

{{'ASDasd'|uppercase}}

在上面我们介绍了几种内置管道,那万一要是内置管道都不能满足我们开发的需求,那么 Angular 还给我们提供了自定义管道,你可以自己去定一个管道,定义要去如何转化输入。
我们可以通过 Angular 提供给我们的命令行去快捷生成一个管道:

nggppipes/pipe-name

这里我创建了一个名为 test 的管道在你运行上面的指令之后,就会在 src 下为你创建一个 pipes 的文件夹,里面保存着你的自定义管道然后再 app 中 Angular 会自动帮你引入这些管道,这样你就能够在全局每个地方使用自定义的管道。接着看到在 pipes 文件夹下的管道,管道本质上就是个类,这里使用装饰器来为它取了个 tests 的名字。在这个类里面我们需要去实现 PipeTransfrom 这个接口,也就是需要有 transform 这个方法,在这个方法中,第一个参数就是要放入管道的输入,第二个数据是我们向管道传递的参数,管道中把它放入了一个数组里面。这个 transform 方法返回什么,我们的页面拿到的就是什么数据,我们先来做一个测试

transform(value:unknown,...args:unknown[]):unknown{
return'tests';
}
...
{{'ASDasd'|tests}}

返回一个固定的字符串,并且在页面中去使用它可以看到返回的结果变成了 tests 字符串,这样我们就可以确定这个方法的返回值就是最终的输出。接下来我们实现一个简单的字符串超出截取的管道:

transform(value:string,...args:number[]):string{
letdefaultLength=10;
if((args[0]||defaultLength){{'sssssssssssssssss免费云主机、域名ssssssssssssss'|tests:30}}

相关推荐: react-natie删除提示如何实现

这篇文章主要介绍“react-natie删除提示如何实现”,在日常操作中,相信很多人在react-natie删除提示如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react-natie删除提示如何实现”的疑惑有所帮助!接…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册