Angular最新教程-第十三节 管道Pipes 自定义管道

简介: Angular最新教程-第十三节 管道Pipes 自定义管道

自定义管道

运行ng generate pipe pipes/cny-currency

因为自定义管道使用的比较少,所以我们把管道都新建到pipes文件目录下。

打开\src\app\pipes\cny-currency.pipe.ts

image.png

这里我们编写了一个简单的管道,在输入的前面加上人民币符号,输出。

这里应该都很好理解,name是我们在html中使用的名字。

transform是管道的关键方法。

value是输入的值。可以指定类型。

args是可选参数,在使用的时候,就是名字后面加冒号的那些属性。

我们在\src\app\site-status\site-status.component.html中测试一下。

<li>在线访客:{{siteStatus.onlineNum|cnyCurrency}}</li>

image.png


链式管道

我们可以把管道链在一起,组合起来一起使用。

比如我们像让金额保留两位小数,并且加上人民币符号。

我们可以如下修改

<li>在线访客:{{siteStatus.onlineNum|number:'1.2-2'|cnyCurrency}}</li>

image.png


纯(pure)管道与非纯(impure)管道

默认的管道都是纯管道,我建议不要使用非纯管道。

纯管道和非纯管道的区别就是是否实时的检测数据是否发生变化。

如我们在使用纯管道的时候,简单的修改被绑定的数组,是不会刷新界面的。

所以我的建议是记下在修改数据的时候,直接更换整个数据,

而不是使用类似push这样的方法,修改数据内部。

因为这样的修改,不会触发Angular的纯管道调动。


没有过滤和排序

在AngularJS1.x中的filter和orderBy过滤器,在Angular中它们没有等价物。

如果需要使用这样的方法,可以通过编写一个服务,然后注入到函数中。

在绑定到页面之前对数据进行操作。

如果这的要在管道中使用过滤,也可以是用以下方法实现。

dataArrs.filter(item=>item.showType)


这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫,希望你开心。

目录
相关文章
|
4月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
74 0
|
4月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
100 0
|
4月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
64 0
|
4月前
|
前端开发 UED
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
71 0
|
4月前
|
JavaScript 前端开发
如何在 Angular 中为响应式表单创建自定义验证器
如何在 Angular 中为响应式表单创建自定义验证器
38 0
|
4月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
48 0
|
4月前
在Angular中创建自定义管道
在Angular中创建自定义管道
21 0
|
4月前
|
JavaScript 安全
如何在 Angular Material 中使用自定义 SVG 图标
如何在 Angular Material 中使用自定义 SVG 图标
81 0
|
4月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
71 0
|
4月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
62 0