千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 角度自定义管道—终极指南

角度自定义管道—终极指南

来源:千锋教育
发布人:syq
时间: 2022-09-23 15:58:54 1663919934

  如何在 Angular 中创建自定义管道,什么是纯管道和不纯管道,以及如何使用纯管道来提高应用程序的性能。Angular 中的管道是组件模板表达式中使用的函数,用于将值转换为其他显示格式。Angular 具有多个内置管道,如日期管道、异步管道等。但是,如果这些管道不能满足我们的需求,我们可以创建自己的管道。

角度自定义管道

  在本文中,我们将研究:

  如何在角度中创建自定义管道(手动/使用角度 CLI)

  如何使用管道并传递额外的参数

  什么是纯管道和不纯管道

  如何通过纯管道和记忆提高性能

  那么,让我们开始吧!

  在角度中创建自定义管道

  要创建自定义管道,我们需要遵循3个简单的步骤:

  1. 创建一个类,并用装饰器装饰它。 装饰器必须包含我们将用于调用管道的 。@Pipename

1

  2. 实现接口。这个接口有一个我们需要实现的方法:方法。PipeTransform transform

2

  是应用管道的参数。称为“其余参数”。它被视为无限数量的可选参数(零个或多个)。如果我们不需要传递任何额外的参数,我们只传递第一个参数。最后,我们返回转换后的值。value...args

  3. 在模块的数组中添加自定义管道 。declaration

3

  从 Angular v14 开始,我们还可以在其模板中使用它,将管道添加到任何独立组件的数组中。imports

4

  在 Angular 中创建和注册自定义管道的手动方法到此结束。

  使用角度气候接口

  如果这对你来说似乎需要做很多工作,请不要担心。我们已经为您准备好了!

  角度 CLI 提供了一种生成拔模管道类的快速方法。它还会在 中注册管道。该命令为:AppModule

5

  或简称:

6

  例如,我们通过运行以下命令创建了管道:mark

7

  CLI 生成了以下草稿管道类,准备将我们想要的任何逻辑放入方法中。transform

8

  使用管道

  使用管道的语法为:

9

  例如,管道接收熊猫的性别并返回引导图标类。gender

10

  奖金 — 我们也可能链条管道。执行顺序从左到右。

11

  P评估额外参数

  传递额外参数的语法为:

12

  在我们的演示中,管道接收两个字符串值:要转换的值和搜索词。如果该值包含搜索词,则该搜索词带有下划线并变为红色。mark

13

  我们还创建 CSS 类来定义样式。

14

  最后,我们在模板中使用管道。

15

  现在,如果我们搜索一只熊猫:

  纯管

  默认情况下,管道被定义为纯管道。 为了清楚起见,我们可以像这样显式设置纯属性:

16

  该属性通知 Angular 该方法是纯的。puretruetransform

  如果方法始终为相同的参数返回相同的结果,并且没有副作用(如修改参数、全局变量或除其返回值以外的任何其他内容),则该方法称为 pure。

  Angular 知道,在这些条件下,除非输入值更改,否则方法的结果不会更改。因此,仅当检测到输入值发生更改时,它才会执行管道。transform

  不纯管道

  相反,通过将属性设置为,我们声明不纯管道。 Angular 每次检测到每次击键或鼠标移动的变化时,都会执行不纯的管道。purefalse

  那么为什么有人想使用不纯的管道呢?

  当我们想要检测复合对象中的不纯变化时,通常使用不纯管道。

  将对象传递到管道时,Angular 仅检查参照的更改。如果对象属性内部发生任何更改,Angular 将无法分辨。

  在任何情况下,使用不纯的管道都要格外小心。 官方文档指出,“长时间运行的不纯管道可能会大大减慢您的应用程序速度”。

  提高应用程序性能

  注意到当我们清除上一个GIF末尾的搜索输入字段时的巨大滞后吗?让我们看看导致此问题的原因,以及如何使用自定义管道解决此问题。

  问题

  问题的原因出在模板文件中,该文件调用该方法。PandaComponent calculatePopularity

17

  在组件的类文件中,该方法使用当前熊猫的出生年份来计算其受欢迎程度。出于演示目的,我们使用斐波那契数列和未优化的递归实现。calculatePopularity

18

  为什么在模板中调用方法会导致性能问题?

  要回答这个问题,我们需要了解Angular的变化检测机制的基础知识。Angular 运行更改检测,以确定在发生更改时需要重新呈现 UI 的哪些部分。被调用方法的结果是 UI 的一部分。

  Angular 如何知道方法的结果是否已更改?

  不能!只有一种方法可以知道:再次执行它。换句话说,它将在每次检测到更改时运行该方法,即使更改无关紧要。

  这将降低应用程序的性能。数量取决于被调用方法的作用。在我们的演示中,我们进行了繁重、重复、未优化的计算,因此我们之前观察到了延迟。

  您还可以通过加载时间判断出问题。我们运行灯塔,它产生了以下分数。

19

 

  注意:灯塔报告分数基于页面的加载时间,而不是与之交互时。

  首次改进

  作为第一步,我们将组件的策略更改为。这意味着,现在仅当其属性更改时,才会触发 内部的更改检测。changeDetection OnPushPandaComponent@Input

  这大大缩短了装载时间。运行灯塔证实了这一改进。

20

 

  这缩短了加载时间,但未缩短应用程序的交互时间。

21

 

  这是因为每次我们键入内容时,我们都在执行搜索,这会更改对 的引用。filteredPandas

22

  熊猫组件的输入属性也是如此。

23

  因此,将再次调用其模板中的方法。calculatePopularity

  纯管道救援

  这就是纯管道发挥作用的地方。我们创建一个纯自定义管道,仅在管道的输入更改时才执行所需的计算。

24

  然后,我们使用管道而不是调用该方法。现在,除非传递给管道的值发生更改,否则不会重新计算受欢迎程度。简单地说,我们不再计算结果中仍然可见的大熊猫的受欢迎程度。

25

  这减少了交互时间,并使应用程序在大多数情况下顺利运行。因为加载时间没有变化,灯塔得分也没有变化。

 

  纯管道和记忆

  以前的改进是一些东西,但是为什么应用程序在最后仍然滞后?

  当我们清除搜索字段时,所有大熊猫都变得可见。因此,以前隐藏的熊猫现在被重新渲染,它们的受欢迎程度必须重新计算。

  我们能做得更好吗?是的,我们能!

  如何?输入备注!

  管道是纯的,因为斐波那契是纯函数。由于是这种情况,我们可以缓存计算,而不是从头开始重新计算它们。为此,我们通过运行以下命令来安装包:popularitymemo-decorator

  npm install memo-decorator

  然后,我们用装饰器装饰我们的方法。fibonacci@memo

22

  这一行是否足以弥补差异?好吧,亲眼看看!

  该应用程序加载速度要快得多,这也反映在灯塔分数中。

23

  此外,交互变得尽可能顺利,没有任何滞后发生。

 

  如果你得到的灯塔分数比我们低约 50 分,则可能是因为你在开发模式下运行应用程序。您需要将应用程序作为生产版本提供。为此,请执行以下操作:

  安装服务器:npm install http-server -g

  构建应用程序:ng build

  服务于生产版本:http-server dist/ng-custom-pipe-demo

  结论

  在本文中,我们研究了 Angular 中的自定义管道。我们解释了如何创建、使用和传递额外的参数。我们看到了纯管道和不纯管道之间的差异。最后,我们将纯管道和记忆相结合,以提高应用程序的性能。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT