angular 管道,Angular管道

　　什么是管道？本文介绍了Angular中的管道，并讲述了如何定制管道。我管它会帮你的！

什么是管道（PIPE）

　　 PIPE，翻译为管道。角度管道是一种编写显示值转换的方法，可以在HTML组件中声明。Angular pipeline以前在AngularJS中称为filter，从Angular 2开始就称为pipeline。将管道数据作为输入，并将其转换为所需的输出。【相关教程推荐：《angular教程》】

　　简单来说，角管可以帮助我们转换输入，包括字符串、整数、日期等。根据我们的需要转换成特定的格式并显示在浏览器中。通过插值表达式，我们可以定义管道，并在特定情况下使用它们。Angular为我们提供了许多不同类型的管道。当然，你甚至可以定制管道。

　　举个简单的例子，日期有各种格式，可以通过管道进行转换，比如把秒转换成分和秒。

内置管道

　　如上所述，Angular为我们提供了许多不同类型的管道，这些管道都属于Angular的内置管道。至于什么是内置管道，如何使用，下面就用代码演示一下吧。

时间管道 date

　　我们创建一个新的Angular项目，并在页面中添加一个新日期()。

　　div{{data}}/div

　　.

　　导出类AppComponent {

　　title=我的应用程序；

　　数据=新日期()

　　}页面将显示当前时间：

　　然后我们可以使用内置管道来转换时间格式。管道的语法需要在变量后添加符号，并声明管道。

　　div { { data date: yyyy-mm-DD } }/div这里我们使用日期管道。管道的具体参数详情请看官方文档，里面介绍了它提供给你转换的所有时间格式。

　　在我们建立管道之后，浏览器中的时间已经改变。

其他管道

　　 Angular还提供了其他通道，如用于更改名称和货币格式的通道(货币):

　　还有一个大写是把字符串转换成大写的：

　　div{{ASDasd 大写}}/div

自定义管道

　　在上面，我们介绍了几种内置管道。万一内置管道都不能满足我们开发的需要，Angular还为我们提供了定制管道。你可以自己设置一个管道，定义如何转换输入。

　　我们可以通过Angular提供的命令行快速生成管道：

　　在这里，我创建了一个名为test的管道。

　　运行上述指令后，将在src下为您创建一个pipes文件夹，您的定制管道将存储在该文件夹中。

　　然后在app里，Angular会自动为你介绍这些管道，让你在世界各地都能使用自定义管道。

　　接下来，查看pipes文件夹下的管线。管道本质上是一个类。这里，装饰器被用来命名测试。

　　在这个类中，我们需要实现接口PipeTransfrom，也就是说，我们需要转换方法。在这个方法中，第一个参数是要放入管道的输入，第二个数据是我们传递给管道的参数，管道将它放入一个数组中。

　　这个转换方法返回的是我们的页面得到的数据。先做个测试吧。

　　转换(值：未知，参数：未知[]):未知{

　　返回“测试”；

　　}

　　.

　　Div{{ASDasd tests }}/div返回一个固定字符串并在页面中使用它。

　　您可以看到返回的结果变成了一个测试字符串，这样我们就可以确定这个方法的返回值是最终的输出。

　　接下来，让我们在截取的管道之外实现一个简单的字符串：

　　transform(值：字符串，args: number[]): string {

　　设defaultLength=10

　　if((args[0] default length)value . length){

　　返回值. substr(0，args[0] defaultLength) .

　　}否则{

　　返回值

　　}

　　}

　　.

　　div { sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss.

总结

　　在本文中，我们学习了管道在Angular。简单地说，管道是一种可以将您的输入转换成您需要的特定输出格式的方法。Angular为我们提供了许多内置管道。当内置管道不符合您的要求时，您可以通过自定义管道来更灵活地自定义输出格式。

　　有关编程的更多信息，请访问：编程视频！即什么是管道？简要分析了Angular中管道的详细内容，更多请关注我们的其他相关文章！

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