angular4——写一个分页搜索的组件

原创 tianxiaofeng747 随笔 技术 491阅读 2017-06-23 15:45:49 举报

先看效果,大致是这样

angular4——写一个分页搜索的组件
1: 有一个输入框,点击输入框,弹出一个列表,这个列表是远程请求的数据,列表显示的内容可自定义,点击列表的项目,给input赋值(显示和value 分开的),
2;列表的数据可通过关键词搜索,可通过点击上一页,下一页切换。

技术拆分:
1: 需要http 请求。 我可以封装一个service
javascript 代码

调用的时候只要import 进来,添加到对应的 providers里 , 然后 依赖注入到 constructor 里。 最后可以通过 this.$api.fun 这样用了。

angular4——写一个分页搜索的组件
2:各种点击处理函数 (比较复杂的应该是点击 input 和 弹出框其他区域, 隐藏 弹出框), 这里为了写的稍微优雅点, 用到了 ng 的 ViewChild 和 HostListener 类

ViewChild 这里主要是 获取到 当前 element angular 有一个 模版插入变量的概念 也就是说

<div class="dropdown" #ele></div> #ele 就等于声明了一个变量, 然后在 components 里面就可以 通过 @ViewChild 装饰器 访问到 就像这样
child: ElementRef;

angular4——写一个分页搜索的组件
3: 弹出列表显示内容的配置, 我可以是一个字符串 ,也可以是一个数组, 也可以是一个函数。
这个是处理函数
javascript 代码

然后点击列表显示到input 里面。(如果 显示内容包含 html 直接显示是有问题的,所以这里做了过滤)
4:需要一个双向绑定 input 的value (这里可以看成是select , 显示值和 要提交的值不同)
ng 的实现很方便
<app-search-pagination [option]="options" [(value)]="myForm.value"></app-search-pagination>
[()] (盒子里的香蕉, 其实是一个语法糖等于)
<app-search-pagination [option]="options" [value]="myForm.value" (value)="value=$event"></app-search-pagination>

其他貌似没啥了,都是逻辑。
附上代码:
html
html 代码

ts
javascript 代码

css (less) 系统默认用 bootstrap 。
css 代码

完!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复