An article to talk about pipelines (PIPE) in Angular

What is a pipeline (PIPE)? This article will introduce you to the pipeline (PIPE) in Angular, and talk about the methods of built-in pipelines and custom pipelines. 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 recommendations: angular tutorial, Programming Teaching]

Simply put, Angular Pipes can help us convert our input, including strings , integers, dates, etc., are converted into specific formats according to our needs 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. They are all built-in pipes of Angular. As for what the built-in pipes 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 syntax of the pipeline needs to add the

| symbol after the variable, and declare the pipeline

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

Here we use the

date pipe. For details about the specific parameters of the pipe, please see Check out 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 introduced several built-in pipes above. First, if the built-in pipelines cannot meet our development needs, then Angular also provides us with custom pipelines. 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.

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

这个 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 An article to talk about pipelines (PIPE) in Angular. For more information, please follow other related articles on the PHP Chinese website!