This is the 10th day of my participation in the August More Text Challenge

First, the role of pipelines

This allows us to format our data in the template.

Two, built-in common pipes

Please refer to the official website for specific API

  1. DatePipe: format the date
  2. UpperCasePipe: Changes the text to all uppercase
  3. LowerCasePipe: Changes the text to all lowercase characters
  4. TitleCasePipe: Text converted to title form (e.g. Hello World =>Hello World)
  5. KeyValuePipe: Converts an object to a key-value pair
  6. JsonPipe: Converts to JSON strings (useful when debugging code)

Angular pipeline features

  1. Pipeline series: multiple pipelines are connected in series to process a data for many times to get the final result.
  2. Pipe priority: the pipe priority is higher than that of the ternary expression, and the result processing of the ternary expression is wrapped in parentheses.
  3. Pure/impure pipelines:
    1. Pipes default to pure pipes, which must be pure functions.
    2. Pure pipe execution occurs when reference changes are made to underlying types and reference objects.
    3. Composite object changes (changes to array elements) are performed impure pipe.

Four, custom pipe trilogy

  1. Custom pipe class and implementationPipeTransforminterface
  2. through@PipeThe decorator declares the newly created class as an Angular pipe
  3. Injection pipe, as inapp.module.tsthedeclarationsArray with the newly created pipe class

5. Custom pipeline project practice

Background:
  1. We recently needed to run our Angular project in IE11, and the initial failure to consider IE compatibility exposed one of the most obvious issues: the time columns of our list interface were all gone.
  2. Because the time format returned by the interface is mostly”yyyy-MM-dd hh:mm:ssTo avoid inconsistency in an old data format we also use the DatePipe pipe in the template to reformat the data, but in the IE environmentnew Date("2020-12-12 13:10:54")The invalid time is prompted.
Processing:
  1. The most consistent solution is to replace the “-” in the middle of the year, month and day with “/”.
  2. The solution I considered was to extend The DatePipe with a custom pipe that would be used to determine the browser context for the date string.
Legacy:
  1. The remaining issue is that the risk of global substitution still feels a bit high… There is a practical plan please recruit.

Pipe Class Description

  1. The transform function is implemented from the PipeTransform interface. The parameter value is the data we need to process, and the parameter args is what style to format.
  2. We can return the processed data by return.
  3. Pipes need to be registered for use just like Angular modules.
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; }}Copy the code