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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
实例解析php的数据类型
2018/10/24 PHP
javascript与cookie 的问题详解
2013/11/11 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
详解Python高阶函数
2020/08/15 Python
Python编写单元测试代码实例
2020/09/10 Python
python 调整图片亮度的示例
2020/12/03 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
幼儿教师师德演讲稿
2014/05/06 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年度保密工作总结
2015/04/24 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
致接力运动员加油稿
2015/07/21 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang