Angular2入坑指南——管道（搜索功能）

想必你们作项目都会遇到搜索功能吧，一般都是搜索本地数据，若是经过http去请求后台再回显的话，那响应速度简直叫人抓狂，因此大多数都是先存到本地而后进行搜索回显。Angular1的方法很简单，只须要在input标签加入ng-model，而后再在想要显示数据的标签加上| filter就行了，然而，Angular2移除了filter和orderBy，他们的理由是：感受filter和orderBy响应很慢。我想问：什么是快？怎么快？达到多少KB/s算快？这就要求咱们本身写方法来实现了，可是文档提供的仅仅只有那么几个管道，根本没有咱们想用的，因而我就本身写了一个搜索关键字的小demo，在这里和你们分享下，不足之处还请多提意见给我哦。

首先建立一个名为*****.pipe.ts的文件，而后在其中引入Pipe、PipeTransform和Injectable：

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

@Pipe({

    name: 'searchInfos',

    pure: true

})

 

@Injectable()

export class SearchFilter implement PipeTransform{

    transform ( items:Array<>,args: any ): any[ ] {

        var searchCtrl = ( data: any ) => {

            var all = false;

            if ( typeof data === 'object' ) {

                for ( var z in data ) {

                    if ( all = searchCtrl( data[z] ) ) {

                        break;

                    };

                };

            } else {

                if ( typeof data === 'number' ) {

                    all = data === args;

                } else {

                    all = data.toString().match( new RegExp( args, 'i' ) );

                };

            };

            return all;

        };

        return ietms.filter(searchCtrl);

    };

};

　　

而后在module中注册它，使它生效：

declarations: [ SearchFilter ],

exports: [ SearchFilter ]

　　

生效后就能够在module下的全部模块中使用了，直接填写管道名称就能够啦，好比下面的例子：

<input type="text" [(ngModel)]="search" />

<p *ngFor="let data of datas | searchInfos: search"></p>

　　

以后，只要在搜索框里输入内容时就会动态显示搜索内容啦~~其实也蛮简单的。若是你以为个人方法还有待改进之处，欢迎来稿建议哦，我会虚心接受每一个人的建议哟~~还请继续关注我哦~~