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

We have introduced several built-in pipes above, in case it is built-in No pipeline can meet our development needs, so Angular also provides us with a custom pipeline. You can define a pipeline yourself and define how to transform the input.

We can quickly generate a pipeline through the command line provided by Angular:

ng g p pipes/pipe-name

Here I created a pipeline named test

After you run the above command, a pipes folder will be created for you under src, which contains your custom pipes

Then Angular will automatically introduce these pipes for you in the app, so that you can use custom pipes everywhere in the world.

Then you see the pipe under the pipes folder. The pipe is essentially a class. Here, a decorator is used to give it a name of tests.

In this class we need to implement the PipeTransfrom interface, which means we need to have the transform method. In this method, the first parameter is the input to be put into the pipe, and the second data is the input we want to put into the pipe. The parameters passed by the pipeline are put into an array in the pipeline.

这个 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!