Angular 2的管道Pipe

最新推荐文章于 2024-08-15 08:13:04 发布

一路斜阳

最新推荐文章于 2024-08-15 08:13:04 发布

阅读量3k

点赞数

分类专栏： Angular2 文章标签： angular

本文链接：https://blog.csdn.net/zhaoruda/article/details/66475562

版权

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

摘要由CSDN通过智能技术生成

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