一文聊聊Angular中的管道（PIPE）

在我们设置好管道之后，浏览器中的时间已经发生了变化了

其他管道

angular还提供了其他管道，比如说改变人名币格式的管道（currency）：

Angular - CurrencyPipe

https://angular.cn/api/common/CurrencyPipe

还有将字符串转化为大写的管道（uppercase）：

<div>{{'ASDasd' | uppercase }}</div>

Angular - UpperCasePipe

Https://angular.cn/api/common/UpperCasePipe

自定义管道

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

我们可以通过 Angular 提供给我们的命令行去快捷生成一个管道：

ng g p pipes/pipe-name

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

在你运行上面的指令之后，就会在 src 下为你创建一个 pipes 的文件夹，里面保存着你的自定义管道

然后再 app 中 Angular 会自动帮你引入这些管道，这样你就能够在全局每个地方使用自定义的管道。

接着看到在 pipes 文件夹下的管道，管道本质上就是个类，这里使用装饰器来为它取了个 tests 的名字。

在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transfORM 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。

这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试

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

返回一个固定的字符串，并且在页面中去使用它

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

接下来我们实现一个简单的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+'...'
    }else{
      return value
    }
  }
  ...
  <div>{{'sssssssssssssssssssssssssssssss' | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

以上就是一文聊聊Angular中的管道（PIPE）的详细内容，更多请关注编程网其它相关文章！