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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
js格式化时间的简单实例
Nov 27 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
node删除、复制文件或文件夹示例代码
Aug 13 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
浅谈php扩展imagick
2014/06/02 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
趣味体育活动方案
2014/02/08 职场文书
保安岗位职责
2014/02/21 职场文书
2014年教研组工作总结
2014/11/26 职场文书
邀请书模板
2015/02/02 职场文书
个人年终总结结尾
2015/03/06 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
加班费申请报告
2015/05/15 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL