Shulou(Shulou.com)06/03 Report--

This article is about how to implement custom pipes in Angular. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. the function of the pipeline

It is convenient for us to format our data in the template.

Second, built-in common pipes

Specific API is queried and used by referring to the official website.

DatePipe: format date

UpperCasePipe: convert text to all uppercase

LowerCasePipe: text is converted to all lowercase

TitleCasePipe: the text is changed to header form (e.g. hello world= > Hello World)

KeyValuePipe: converts objects to key-value pairs

JsonPipe: converted to a JSON string (useful when debugging code)

III. Characteristics of Angular pipeline

Pipeline series: multiple pipes are connected in series to process a data for many times to get the final effect.

Pipeline priority: it is mainly mentioned that the priority of the pipeline is higher than that of the ternary expression. Please wrap the result of the ternary expression in parentheses if you need the pipeline to process the result.

Pure / impure piping:

The pipe defaults to pure pipe, which must be a pure function.

Pure pipeline execution when references to underlying types and reference objects are changed.

Non-pure pipeline execution when compound object changes (change array elements).

IV. Custom Pipeline Trilogy

Customize pipe classes and implement the PipeTransform interface

Declare the newly created class as an Angular pipe through the @ Pipe decorator

Inject pipes, such as the newly created pipe class in the declarations array of app.module.ts

V. Custom pipeline project practice

Background:

Recently, we need to run our Angular project on IE11 browsers, because the compatibility of IE was not considered at the beginning, which exposed one of the most obvious problems, and our list interface has all the time columns.

Because the time format returned by the API is mostly "yyyy-MM-dd hh:mm:ss", in order to avoid the inconsistency of an old data format, we will use the DatePipe pipeline in the template to format the data again, but in the IE browser environment new Date ("2020-12-12 13:10:54") will prompt an invalid time.

Deal with:

A lot of consistent solutions can be found through search, which is to replace the "-" in the middle of the year, month and day with "/".

The solution I'm considering is to extend DatePipe through custom pipes and add a judging browser environment to the custom pipes to deal with date strings.

Legacy:

The remaining problem is that the risk of global replacement still feels a little high. If you have a practical plan, please give me some advice.

Pipe class description

The transform function is implemented from the PipeTransform interface, and the parameter value is the data we need to process, and the parameter args is formatted in what style.

We can return the processed data through return.

Modules that connect with Angular also need to be registered and used.

Import {DatePipe} from "@ angular/common"; import {Pipe, PipeTransform} from "@ angular/core"; @ Pipe ({name: "gDate", pure: true}) export class GDatePipe implements PipeTransform {transform (value: any,... args: any []) {let time = "; if (this.isIE ()) {time = new DatePipe (" en-US ") .transform (value.replace (/-/ g," / "),... args) } else {time = new DatePipe ("en-US") .transform (value, .args);} return time;} isIE (): boolean {return "ActiveXObject" in window;}} Thank you for reading! This is the end of the article on "how to implement custom pipes in Angular". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.