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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JavaScript实现多个物体同时运动
Mar 12 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python-嵌套列表list的全面解析
2016/06/08 Python
Python书单 不将就
2017/07/11 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python构建基础的爬虫教学
2018/12/23 Python
Python实现播放和录制声音的功能
2020/08/12 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
高三政治教学反思
2014/02/06 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
学校班班通实施方案
2014/06/11 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
入队仪式主持词
2015/07/04 职场文书