Angular2的管道Pipe的行使方式

永利皇宫402

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. 数量变动物检疫测

在Angular第22中学管道分为三种:纯管道和非纯管道。暗许情状下管道都以纯管道。

纯管道正是在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可以将数据作为输入,然后遵照准则将其改动并出口。在Angular2中有相当多放到的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);
  }
}

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

@Pipe({ name: 'filterUser', pure: false })
export class FilterUserPipe implements PipeTransform {
  transform(allUsers: Array<any>, ...args: any[]): any {
    return allUsers.filter(user => user.id > 3);
  }
}
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完成如下所示:

管道Pipe能够将数据作为输入,然后依据准则将其更动并出口。在Angular第22中学有为数非常多平放的Pipe,比方DatePipe、UpperCasePipe和CurrencyPipe等。在此间我们注重介绍怎样自定义Pipe。

1. 管道定义

  1. 亟待运用@Pipe来装饰类
  2. 兑现PipeTransform的transform方法,该方法接受一个输入值和局地可选参数
  3. 在@Pipe装饰器中内定管道的名字,这几个名字就足以在模板中央银行使。

代码如下所示:

2. 管道使用

那般每当我们加多新顾客时,数据就能立时响应在页面上了。

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

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得以生效.

只顾:当定义完成后,不要遗忘在Module的declarations数组中包罗那些管道。

在user.component.ts中开头了多少users和定义三个增添user的情势,在user.template.html中运用自定义管道filterUser。

寻求了一些实施方案,好多是要注意得在根模块中声称,于是小编做了个尝试,将零件也写成八个成效模块,并在组件成效模块中评释pipe,结果很喜欢,组件中的pipe生效了。

当运行应用时,可以开采独有id大于3的user被出示出来了。但是,当您点击开关加多客商时,开掘并从未什么样反应,数据并未变动。这是干什么吗?

user.template.html达成如下所示:

如代码所示,

在Angular第22中学管道分为三种:纯管道和非纯管道。私下认可情形下管道都以纯管道。

Pipe的定义如下代码所示:

3. 多少变动检验

你也许感兴趣的篇章:

  • 浅谈Angular4中常用管道
  • Angular2管道Pipe及自定义管Doug式数据用法实例深入分析
  • Angular中管道操作符(|)的施用格局
<div>
  <ul>
    <li *ngFor="let user of (users | filterUser)">
      {{user.name}}
    </li>
  </ul>
</div>
<button (click)="addUser()"> add new user</button>

上述正是本文的全体内容,希望对我们的就学抱有帮助,也盼望我们多多帮助脚本之家。

纯管道正是在Angular检查评定到它的输入值发生了纯更换时才会举行政管理道。纯改变相当于说原始数据类型(如String、Number和Boolean等)或然指标的援引发生变化。该管道会忽略对象内部的变化,在演示中,数组的援引未有发生退换,改换的只是数组内部的数额,所以当大家加多数据时并不曾及时响应在页面上。

在根模块申明的pipe在页面中引用有效,而在页面中引用的component中的模板则不行,那也是令小编疑惑的地点…

在我们的亲自过问少将管道退换为非纯管道是万分贱轻便的,只要在管道元数据旅长增添pure标记为false就可以。

具体操作方法:

发表评论

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

网站地图xml地图