Angular2的管道Pipe的使用方法


Posted in Javascript onNovember 07, 2017

管道Pipe可以将数据作为输入,然后按照规则将其转换并输出。在Angular2中有许多内置的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得以生效.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
vue组件watch属性实例讲解
Nov 07 #Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 #Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
基于vue实现分页效果
Nov 06 #Javascript
You might like
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
python编程实现归并排序
2017/04/14 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python使用配置文件过程详解
2019/12/28 Python
python with语句的原理与用法详解
2020/03/30 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
公司财务人员岗位职责
2015/04/14 职场文书
追讨欠款律师函
2015/06/24 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL