这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下
本文实例讲述了Angular封装搜索框组件操作。分享给大家供大家参考，具体如下：
后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。
大致样式如下图：
这里我使用的是ng-zorro蚂蚁金服的angular组件库
index.html:
<div class="ant-advanced-search-form"> 2 && !expandForm) ? 'none' : 'block'"> {{item.label}} = 3"> <button type="submit">查询</button><button type="reset" class="mx-sm">重置</button><nz-row [hidden]="filterLength <button type="submit">查询</button><button type="reset" class="mx-sm">重置</button> 3"> {{expandForm ? '收起' : '展开'}} <i class="anticon"></i></div>
index.ts:
import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core'; import { _HttpClient } from '@delon/theme'; @Component({ selector: 'search-filter', templateUrl: './index.html', styleUrls: ['./index.less'] }) export class SearchFilterComponent implements OnInit { @Input() columns; @Input() loading; @Output() toSearch = new EventEmitter(); constructor( private httpClient: _HttpClient, ) { } searchData: any = { page: 1, limit: 15 }; filterLength = 0; operatorOptions = []; merchantOptions = []; clientOptions = []; adminOptions = []; ngOnInit() { this.columns.forEach(el => { if (el.type == 'operator') { this.searchData['user_id'] = ''; this.searchData['el.user_type'] = ''; this.onSearch('') } if (el.type == 'merchant') { this.onSearch_merchant('') } if (el.type == 'client') { this.onSearch_client('') } if (el.type == 'admin') { this.onSearch_admin('') } this.searchData[el.key] = ""; this.filterLength++; }) } // 清空搜索条件 resetData() { for (const i in this.searchData) { if (this.searchData[i]) { this.searchData[i] = ''; } } this.searchData.page = 1; this.searchData.limit = 15; this.submit(); } // 搜索按钮事件 submit() { if (this.searchData.operator) { delete this.searchData.operator; } if (this.searchData.start_at) { this.searchData.start_at = this.format(this.searchData.start_at) } if (this.searchData.end_at) { this.searchData.end_at = this.format(this.searchData.end_at) } this.toSearch.emit(this.searchData); } // 日志操作人搜索 onSearch(value: string) { this.httpClient.get('/api/admin/member?name=' + value).subscribe((res: {}) => { const resData: any = res; this.operatorOptions = resData.message; }); } changeOption(value: {}) { this.searchData.user_id = value['id']; this.searchData.user_type = value['user_type']; } // 商户名称搜索 onSearch_merchant(value: string) { this.httpClient.get('/api/admin/merchant?name=' + value).subscribe((res: {}) => { const resData: any = res; this.merchantOptions = resData.message.data; }); } // 客户名搜索 onSearch_client(value: string) { this.httpClient.get('/api/admin/user?name=' + value).subscribe((res: {}) => { const resData: any = res; this.clientOptions = resData.message.data; }); } // 操作员名搜索 onSearch_admin(value: string) { this.httpClient.get('/api/admin/admin?name=' + value).subscribe((res: {}) => { const resData: any = res; this.adminOptions = resData.message.data; }); } // 格式化时间 format(time) { var date = new Date(time); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); return (year + '-' + month + '-' + day); } }
index.less:
:host { display: block; width: 95%; margin: 0 auto; ::ng-deep { nz-form-control { min-width: 60%; } nz-select { width: 100%; } .ant-calend<b style="color:transparent">来源gao@!dai!ma.com搞$$代^@码网</b>ar-picker { width: 100%; } } }
其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
以上就是Angular封装搜索框组件操作示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angular封装搜索框组件操作示例
转载请注明原文链接：Angular封装搜索框组件操作示例
