Angular2入坑指南——管道(搜索功能)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

  

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

以上是关于Angular2入坑指南——管道(搜索功能)的主要内容,如果未能解决你的问题,请参考以下文章

3. Shodan新手入坑指南

MegaCli入坑指南

MegaCli入坑指南

树莓派zero w入坑指南

Weex 入坑指南:快速开始 Weex 之旅

Rust入坑指南:步步为营