时间:2021-05-28
管道Pipe可以将数据作为输入,然后按照规则将其转换并输出。在Angular2中有许多内置的Pipe,比如DatePipe、UpperCasePipe和CurrencyPipe等。在这里我们主要介绍如何自定义Pipe。
1. 管道定义
Pipe的定义如下代码所示:
如代码所示,
注意:当定义完成后,不要忘记在Module的declarations数组中包含这个管道。
2. 管道使用
user.template.html实现如下所示:
user.component.ts实现如下所示:
在user.component.ts中初始了数据users和定义一个添加user的方法,在user.template.html中使用自定义管道filterUser。
当启动应用时,可以发现只有id大于3的user被显示出来了。可是,当你点击按钮添加用户时,发现并没有什么反应,数据并没有改变。这是为什么呢?
3. 数据变更检测
在Angular2中管道分为两种:纯管道和非纯管道。默认情况下管道都是纯管道。
纯管道就是在Angular检测到它的输入值发生了纯变更时才会执行管道。纯变更也就是说原始数据类型(如String、Number和Boolean等)或者对象的引用发生变化。该管道会忽略对象内部的变化,在示例中,数组的引用没有发生改变,改变的只是数组内部的数据,所以当我们添加数据时并没有立即响应在页面上。
非纯管道会在组件的变更检测周期中执行,而且会对对象的内部数据进行检测。
在我们的示例中将管道变更为非纯管道是非常贱简单的,只要在管道元数据中将添加pure标志为false即可。
代码如下所示:
这样每当我们添加新用户时,数据就会马上响应在页面上了。
在根模块声明的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得以生效.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本篇angular2/ionic2实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下:添加一个pipe:import{Pipe,Injectable,P
准备Angular2环境ng-bootstrap是基于Angular2的,因此需要先准备Angular2的环境。使用ng-bootstrap下载ng-boots
本文实例讲述了Angular2使用路由自定义弹出组件toast操作。分享给大家供大家参考,具体如下:原理:使用Angular2的命名路由插座,一个用来显示app
Angular2已经发布了2.1.2版本,相信很多人已经在使用(试用)了,相比AngularJS1.x,Angular2在性能上有了长足的进步,同时Angula
Augury-Angular专用的chrome调试插件如题,在的2016-12-8谷歌开发者大会上,angular2的leader来给我们演示了angular2