如何在Angular中创建自定义管道以实现优雅的数据显示
在使用angular构建用户界面时，angular中的管道是您经常遇到的短语之一。它们是什么以及它们如何工作？
根据stackoverflow的调查，angular是最受欢迎的前五个网络框架和技术之一。
模块化架构使angular成为开发人员的最爱，使他们能够将应用程序拆分为小型可重用组件。模块化的代码库易于维护，还增强了协作。双向数据绑定、跨浏览器兼容性以及庞大的生态系统和社区是angular成为最佳前端框架的其他原因。
本文讨论了angular中的管道是什么，它们的用例，不同类型的内置管道以及如何在angular中创建自定义管道。
angular中的管道是什么？
管道是angular中的一个功能，用于转换和格式化应用程序中的数据。管道简单地将一个值作为输入并返回一个转换后的值作为输出。转换的方式各不相同，可以是将货币或日期转换，或者是从列表中排序或过滤项。
管道旨在提高用户体验，因为它们可以转换数据并返回用户可以轻松消耗和交互的值。angular中的管道可以是内置的或自定义的。无论类型如何，以下是使用angular管道的一些原因：
- 转换数据：这是angular中管道的主要用途。管道用于转换数据，以便向用户显示可读的内容。
- 代码可读性和可维护性：大多数应用程序是通过协作构建的。因此，您必须确保团队中的其他成员能够理解您的代码。管道使您的代码更简洁，易于维护。
- 本地化：您可以将数据本地化以适应目标市场。例如，存在不同的日期格式。因此，您可以使用datepipe将数据格式化为适合用户区域设置的格式。
- 排序和过滤数据：您可以使用orderpipe或filterpipe对数据进行排序或过滤。
angular中的内置管道类型
angular具有用于不同目的的各种内置管道。以下是您在开发过程中会遇到的一些示例。
- percentpipe：当您想将数字转换为百分比字符串时，请使用此管道。
- datepipe：根据区域设置规则格式化日期值时，请使用此管道。
- lowercasepipe：使用此管道将所有文本转换为小写。
- uppercasepipe：当您想将所有文本更改为大写时，可以使用此管道。
- currencypipe：当您想根据区域设置规则将数字更改为货币字符串时，这是一个完美的选择。
- decimalpipe：该管道使用区域设置规则将数字转换为带有小数点的字符串。
在angular中创建自定义管道
我们已经看到了内置管道及其用例。但是，angular还支持自定义管道。当您想要实现内置管道无法实现的功能时，这样的管道非常重要。这些管道允许您扩展应用程序的功能。
先决条件
在angular中构建自定义管道之前，您需要以下内容：
- 用于angular应用程序的node.js运行时环境。如果您没有node.js，可以 下载node.js。
- 理解angular的工作原理
- angular cli用于创建应用程序和运行不同的命令。您可以使用以下命令安装它：
npm install -g @angular/cli
按照以下步骤在angular中构建自定义管道：
#1. 创建一个新的angular项目。您可以使用以下命令开始：
ng new pipes
#2. 将目录更改为您创建的应用程序并在您喜欢的代码编辑器中打开它。我正在使用vscode。您可以运行以下命令
cd pipes && code .
您的项目文件夹将类似于这样;
#3. 创建自定义管道。您可以使用以下命令生成一个新的自定义管道：
ng generate pipe custom-pipe
如果检查您的项目文件夹，您会注意到已创建以下两个文件：
src/app/custom-pipe.pipe.spec.ts
src/app/custom-pipe.pipe.ts
#4. 定义管道的逻辑
打开custom-pipe.pipe.ts文件，您将找到以下代码：
我们现在可以创建一个简单的逻辑，其中我们的自定义管道附加到一个字符串上。
您可以更改文件的内容为;
import { pipe, pipetransform } from '@angular/core';
@pipe({
name: 'custompipe'
})
export class custompipepipe implements pipetransform {
transform(value: string): string[] {
return value.split('');
}
}#5. 注册自定义管道。打开app.module.ts文件并检查是否有@ngmodule和修饰符。
确认此文件是否具有以下代码;
import { ngmodule } from '@angular/core';
import { browsermodule } from '@angular/platform-browser';
import { approutingmodule } from './app-routing.module';
import { appcomponent } from './app.component';
import { custompipepipe } from './custom-pipe.pipe';
@ngmodule({
declarations: [
appcomponent,
custompipepipe
],
imports: [
browsermodule,
approutingmodule
],
providers: [],
bootstrap: [appcomponent]
})
export class appmodule { }#6. 打开app.component.html，删除所有内容并添加此行；
{{ '12345' | custompipe }} 使用此命令运行服务器；
ng serve
这是在浏览器上显示的内容;
如何在angular中链接管道
管道链接允许您使用单个表达式执行多个操作。我们使用管道运算符（|）将不同的管道组合在一起。
我们可以链接管道的原因有以下几个：
- 链式管道提倡代码的可重用性和模块化: 您可以设置每个管道执行特定的转换，以便在应用程序中重用。
- 保持干净的代码: 链接模板可以让您保持代码简洁、清晰和可读。
- 定制: 管道链允许您组合自定义和内置管道，并根据需要进行定制。
- 复杂的转换: 您可以设置多个管道来实现复杂的转换，而不是设置一个管道来执行多个转换。
您可以将自定义管道与另一个管道或内置管道链接起来。我可以将我们之前创建的custompipe与内置的小写（lowercase）管道链接起来。下面是如何使用的：
{{ datavalue | custompipe | lowercase }}
纯管道 vs. 非纯管道
angular中有两种类型的管道：纯管道和非纯管道
纯管道
在angular中，管道默认是纯的。纯管道预期对于相同的输入返回相同的输出。这样的管道预期是确定性的和无状态的。
angular的变更检测机制会自动优化纯管道。除非纯管道的输入发生变化，否则angular不会重新运行管道转换。
下面是如何将管道声明为纯管道的示例：
@pipe({
name: 'uppercase',
pure: true
})
export class uppercasepipe {
transform(value: string): string {
return value.touppercase();
}
}如您所见，我们将@pipe装饰器的pure属性设置为true。
非纯管道
当angular检测到变化时，非纯管道将执行。这样的变化不一定来自输入。非纯管道适用于需要访问应用程序当前状态的情况。访问数据库或进行http请求是可以使用非纯管道的完美例子。
下面是非纯管道的示例：
@pipe({
name: 'sort',
pure: false
})
export class sortpipe {
transform(array: any[]): any[] {
return array.sort();
}
}如您所见，我们将@pipe装饰器的pure属性设置为false，使我们的管道成为非纯管道。
在angular中创建管道：最佳实践
- 驼峰命名管道：如果你注意到了，我给我的管道命名为
custompipe。如果你的管道有多个单词，请始终使用这种方法。 - 测试你的管道：创建管道并不保证它能正常工作。请始终测试你的管道，以确保它们按预期工作。你可以使用各种库来自动化这个过程。
- 避免复杂的管道：你可能希望一个管道执行多个操作。然而，这不是一个好方法，最佳实践是创建不同的管道来执行不同的操作。
- 使用纯管道：纯管道将始终从相同的输入返回相同的输出。angular可以为纯管道缓存结果，从而提高性能和响应时间。
常见问题
为什么我们需要angular中的管道？
管道在应用程序中转换和格式化数据。管道以一个值作为输入，并返回一个经过转换的值作为输出。转换的方式各不相同，可以简单地转换货币或日期，或对列表中的项目进行排序或过滤。
什么是自定义管道？
这是您创建的用户定义管道，用于执行自定义转换。您可以通过管道链接将自定义管道与内置管道结合使用。
举例说明angular中的内置管道。
datepipe、uppercasepipe、lowercasepipe、currencypipe、decimalpipe和percentpipe
什么是管道链接？
管道链接是将多个管道组合在一起的过程。管道链接允许您用一个表达式执行多个操作。我们使用管道运算符（|）在angular中组合不同的管道。您可以将自定义管道与其他管道链接，或将其与内置管道链接。
结论
我们相信您现在可以在下一次面试中描述管道，因为这是angular常见问题中的一个常见问题。我们还介绍了不同的内置管道以及如何在angular中创建自定义管道。
当您想要满足特定需求或使应用程序更具动态性时，自定义管道将非常有用。然而，您必须了解angular在底层是如何工作的，才能创建和使用自定义管道。
您还可以探索一些angular ui库，以创建世界级的用户体验。
