开发设计小程序流程_Angular2的管道Pipe的使用方法

摘要: Angular2的管路Pipe的应用方式 管路Pipe能够将数据信息做为键入,随后依照标准将其变换并輸出。在Angular2中有很多内嵌的Pipe,例如DatePipe、UpperCasePipe和CurrencyPipe等。在这里里大家关...

Angular2的管道Pipe的使用方法       本篇文章主要介绍了Angular 2的管道Pipe的使用方法,详细的介绍了管道的定义和使用方法,具有一定的参考价值,有兴趣的可以了解一下

管道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 

如代码所示,

实现PipeTransform的transform方法,该方法接受一个输入值和一些可选参数 。

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

2. 管道使用

<实现如下所示:
 div 
 li *ngFor="let user of (users | filterUser)" 
 {{user.name}}
 /li 
 /ul 
 /div 
 button (click)="addUser()" add new user /button 
import { Component } from "@angular/core";
@Component({
 ',
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++ })
<中使用自定义管道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 

这样每当我们添加新用户时,数据就会马上响应在页面上了。

ponent中的模板则无效,这也是令我困惑的地方...

寻求了一些解决方案,大多是要注意得在根模块中声明,于是我做了个尝试,将组件也写成一个功能模块,并在组件功能模块中申明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得以生效.

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503