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>

　　

以後，只要在搜索框裏輸入內容時就會動態顯示搜索內容啦~~其實也蠻簡單的。若是你以爲個人方法還有待改進之處，歡迎來稿建議哦，我會虛心接受每一個人的建議喲~~還請繼續關注我哦~~