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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
Vue3为什么这么快
Sep 23 Javascript
浅谈克隆 JavaScript
Nov 02 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指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python绘制雪景图
2019/12/16 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
一套软件测试笔试题
2014/07/25 面试题
消防安全责任书范本
2014/04/15 职场文书
竞选村长演讲稿
2014/04/28 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
教育教学读书笔记
2015/07/02 职场文书