How to use pipeline Pipe of Angular2, and pipeline pipe of angular2

How to use pipeline Pipe of Angular2, and pipeline pipe of angular2

Pipeline Pipe can use data as input and convert and output data according to rules. There are many built-in Pipe in Angular2, such as DatePipe, UpperCasePipe, and currenpolicipe. Here we will mainly introduce how to customize Pipe.

1. MPS queue Definition

The following code defines Pipe:

import { PipeTransform, Pipe } from '@angular/core';/*users: Array<any> = [  { name: '1', id: 1 },  { name: '2', id: 2 },  { name: '3', id: 3 },  { name: '4', id: 4 },  { name: '5', id: 5 },  { name: '6', id: 6 }];*/@Pipe({ name: 'filterUser' })export class FilterUserPipe implements PipeTransform {  transform(allUsers: Array<any>, ...args: any[]): any {    return allUsers.filter(user => user.id > 3);  }}

As shown in the code,

1. Use @ Pipe for decoration class
2. Implements the PipeTransform transform method. This method accepts an input value and some optional parameters.
3. Specify the name of the pipeline in the @ Pipe decorator. This name can be used in the template.

Note: After the definition is complete, do not forget to include this pipeline in the Module's declarations array.

2. MPS queue usage

The implementation of user.template.html is as follows:

<div>  <ul>    <li *ngFor="let user of (users | filterUser)">      {{user.name}}    </li>  </ul></div><button (click)="addUser()"> add new user</button>

The implementation of user. component. ts is as follows:

import { Component } from "@angular/core";@Component({  templateUrl: './user.template.html',})export class EnvAppComponent {  id = 7;  users: Array<any> = [    { name: '1', id: 1 },    { name: '2', id: 2 },    { name: '3', id: 3 },    { name: '4', id: 4 },    { name: '5', id: 5 },    { name: '6', id: 6 }  ];  addUser() {    this.users.push({ name: this.id++, id: this.id++ })  }}

In user.component.ts, specify the data users and define a user, and use the custom MPs queue filterUser in user.template.html.

When you start an application, you can find that only users with IDs greater than 3 are displayed. However, when you click the button to add a user, the data is not changed. Why?

3. Data Change Detection

In Angular2, pipelines are divided into pure and non-pure pipelines. By default, pipelines are pure pipelines.

A pure MPs queue is executed only when Angular detects a pure change in its input value. Pure change means that the original data type (such as String, Number, and Boolean) or object reference changes. This pipeline ignores the changes in the object. In this example, the array reference is not changed, but only the data in the array is changed, so when we add data, it does not respond immediately on the page.

Non-pure pipelines are executed in the Change Detection cycle of the component, and internal data of the object is detected.

In our example, changing an MPS queue to a non-pure MPs queue is very simple. You only need to add the pure flag to false in the MPs queue metadata.

The Code is as follows:

@Pipe({ name: 'filterUser', pure: false })export class FilterUserPipe implements PipeTransform {  transform(allUsers: Array<any>, ...args: any[]): any {    return allUsers.filter(user => user.id > 3);  }}

In this way, whenever we add a new user, the data will immediately respond to the page.

The pipe declared by the root module is valid for reference on the page, while the template in the component referenced on the page is invalid, which is also confusing to me...

I have sought some solutions. Most of them should be declared in the root module. So I made an attempt to write the component into a function module and declare pipe in the component function module, the results were excited, and pipe in the component took effect.

Procedure:

You only need to create a new component function module and declare pipe, myComponent. module. ts in the module.

import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { myComponent } from 'myComponent.ts';import { HelloPipe } from "hello.pipe.ts";@NgModule({ declarations: [  myComponent,  HelloPipe ], imports: [  IonicPageModule.forChild(myComponent) ], exports: [  myComponent ]})export class MyComponent {}

As a result, the template reference pipe of the component takes effect.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.