Angular2的管道Pipe的使用方法

2023-09-21 11:23:05 224

管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。在Angular2中有许多内置的Pipe，比如DatePipe、UpperCasePipe和CurrencyPipe等。在这里我们主要介绍如何自定义Pipe。

1.管道定义

Pipe的定义如下代码所示：

import{PipeTransform,Pipe}from'@angular/core';

/*users:Array=[
{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'})
exportclassFilterUserPipeimplementsPipeTransform{
transform(allUsers:Array,...args:any[]):any{
returnallUsers.filter(user=>user.id>3);
}
}

如代码所示，

需要使用@Pipe来装饰类
实现PipeTransform的transform方法，该方法接受一个输入值和一些可选参数
在@Pipe装饰器中指定管道的名字，这个名字就可以在模板中使用。

注意：当定义完成后，不要忘记在Module的declarations数组中包含这个管道。

2.管道使用

user.template.html实现如下所示：




{{user.name}}



addnewuser

user.component.ts实现如下所示：

import{Component}from"@angular/core";

@Component({
templateUrl:'./user.template.html',
})

exportclassEnvAppComponent{
id=7;
users:Array=[
{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})
exportclassFilterUserPipeimplementsPipeTransform{
transform(allUsers:Array,...args:any[]):any{
returnallUsers.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
]
})

exportclassMyComponent{}

大功告成，组件的模板引用pipe得以生效.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Angular2的管道Pipe的使用方法

热门推荐

随机推荐