What is a pipeline? A brief analysis of pipelines (PIPE) in Angular

What is a pipeline? This article will introduce you to the pipeline (PIPE) in Angular and talk about how to customize the pipeline. I hope it will be helpful to you!

What is a pipeline (PIPE)

PIPE, translated as pipeline. Angular Pipes are a way of writing display value transformations that can be declared in HTML components. Angular pipelines were previously known as filters in AngularJS and since Angular 2 are known as pipes. Pipes take data as input and transform it into the desired output. [Related tutorial recommendation: "angular tutorial"]

Simply put, Angular Pipes can help us convert our input, including strings, integers, dates, etc., according to our It needs to be converted into a specific format and displayed in the browser. Through interpolation expressions, we can define a pipeline and use it in specific situations. Angular provides us with many different types of pipelines. Of course, you can even customize pipelines.

To give a relatively simple example, date formats are diverse. You can convert between various formats through pipelines, such as converting seconds into hours, minutes and seconds.

Built-in pipes

As mentioned above, Angular provides us with many different types of pipes, which are Angular’s ​​built-in pipelines. As for what the built-in pipelines are and how to use them, let’s demonstrate them through code below.

Time Pipelinedate

We create a new Angular project and add a new Date() to the page:

<div>{{data}}</div>
...
export class AppComponent {
  title = &#39;my-app&#39;;
  data = new Date()
}

The page will display the current time:

Then we can use the built-in pipeline to convert a time format, the pipeline The syntax requires adding the | symbol after the variable and declaring the pipeline

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

Here we use the date pipeline. For details on the specific parameters of the pipeline, please refer to the official documentation. , which introduces all the time formats it provides for you to convert.

Angular - DatePipe

https://angular.cn/api/common/DatePipe#description

After we set up the pipeline, browse The time in the processor has changed

Other pipelines

Angular also provides other pipelines, such as changing the name of the currency Format of pipe (currency):

Angular - CurrencyPipe

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

There is also a pipe that converts strings to uppercase (uppercase):

<div>{{&#39;ASDasd&#39; | uppercase }}</div>

##Angular - UpperCasePipe

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

Custom pipe

ng g p pipes/pipe-name

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

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | 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)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

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

总结

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

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of What is a pipeline? A brief analysis of pipelines (PIPE) in Angular. For more information, please follow other related articles on the PHP Chinese website!