Angular2的管道Pipe的使用方法【永利澳门游戏网站】

Angular2的管道Pipe的行使方式,angular2管道pipe

管道Pipe能够将数据作为输入,然后遵照法则将其更动并出口。在Angular第22中学有广大松手的Pipe,比方DatePipe、UpperCasePipe和CurrencyPipe等。在那大家最首要介绍怎么着自定义Pipe。

1. 管道定义

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);
  }
}

如代码所示,

  1. 供给利用@Pipe来装饰类
  2. 落到实处PipeTransform的transform方法,该措施选择叁个输入值和一些可选参数
  3. 在@Pipe装饰器中钦定管道的名字,那一个名字就足以在模板中接纳。

在意:当定义达成后,不要遗忘在Module的declarations数组中蕴藏那一个管道。

2. 管道使用

user.template.html实现如下所示:

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

user.component.ts达成如下所示:

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++ })
  }
}

在user.component.ts中初始了数码users和概念三个增多user的办法,在user.template.html中动用自定义管道filterUser。

当运行应用时,能够开掘只有id大于3的user被出示出来了。可是,当你点击按键增多客户时,开掘并不曾什么影响,数据并不曾改动。那是干什么吧?

3. 数据变动检验

在Angular2中管道分为三种:纯管道和非纯管道。默许情形下管道都是纯管道。

纯管道正是在Angular检查实验到它的输入值发生了纯更改时才会进行政管理道。纯更改也正是说原始数据类型(如String、Number和Boolean等)可能指标的引用产生变化。该管道会忽视对象内部的扭转,在示范中,数组的援引未有生出转移,修改的只是数组内部的数量,所以当大家抬高数据时并未即时响应在页面上。

非纯管道会在组件的改观检验周期中实行,何况会对目的的内部数据开展检查评定。

在我们的演示中校管道更动为非纯管道是老大贱轻松的,只要在管道元数据旅长加多pure标记为false就能够。

代码如下所示:

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

如此每当大家加多新顾客时,数据就能够即刻响应在页面上了。

在根模块声明的pipe在页面中援用有效,而在页面中引用的component中的模板则不行,那也是令小编狐疑之处…

寻求了黄金时代部分缓和方案,非常多是要静心得在根模块中声称,于是作者做了个尝试,将零器件也写成八个功用模块,并在组件功用模块中注脚pipe,结果很心仪,组件中的pipe生效了。

具体操作方法:

只需新建组件效能模块,并在改模块中评释pipe,myComponent.module.ts

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 {}

居功至伟告成,组件的模版引用pipe得以生效.

上述正是本文的全体内容,希望对我们的学习抱有助于,也期望大家多多点拨帮客之家。

管道Pipe能够将数据作为输入,然后遵照法则将其改换并出口。在Angular第22中学有成都百货上千内置的Pipe,比…

发表评论

电子邮件地址不会被公开。 必填项已用*标注