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 相关文章推荐
用js格式化金额可设置保留的小数位数
May 09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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 事件机制(2)
2011/03/23 PHP
php学习之变量的使用
2011/05/29 PHP
PHP答题类应用接口实例
2015/02/09 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
js Date概念详细介绍
2013/11/22 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript错误处理
2015/02/03 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
全面理解闭包机制
2016/07/11 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python常用的日期时间处理方法示例
2015/02/08 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python匿名函数用法实例分析
2019/08/03 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
描述RIP和OSPF区别以及特点
2015/01/17 面试题
美发店5.1活动方案
2014/01/24 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
中班上学期个人总结
2015/02/12 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
入党申请书怎么写?
2019/06/21 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
MySQL存储过程及语法详解
2022/08/05 MySQL