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入坑指南——管道（搜索功能）的主要内容，如果未能解决你的问题，请参考以下文章