Angular 2的管道Pipe

本文详细介绍了Angular 2中的管道Pipe,包括如何定义和使用自定义Pipe,以及数据变更检测的概念。通过示例说明了纯管道与非纯管道的区别,并展示了如何使管道在数据变化时即时响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  管道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);
    }
}

如代码所示,

  • 需要使用@Pipe来装饰类
  • 实现PipeTransform的transform方法,该方法接受一个输入值和一些可选参数
  • 在@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);
    }
}

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值