这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下
本文实例讲述了Angular封装搜索框组件操作。分享给大家供大家参考，具体如下：
后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。
大致样式如下图：
这里我使用的是ng-zorro蚂蚁金服的angular组件库
index.html:
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 EventEmitterindex.less:
:host { display: block; width: 95%; margin: 0 auto; ::ng-deep { nz-form-control { min-width: 60%; } nz-select { width: 100%; } .ant-calendar-picker { width: 100%; } } } 其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
以上就是Angular封装搜索框组件操作示例的详细内容，更多请关注0133技术站其它相关文章！
