资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Angular封装搜索框组件操作示例

本文实例讲述了Angular封装搜索框组件操作。分享给大家供大家参考，具体如下：

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的丰县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。

大致样式如下图：

Angular封装搜索框组件操作示例

这里我使用的是ng-zorro蚂蚁金服的angular组件库

index.html:


 
  
   
    {{item.label}}
    
     
     
      
     
     
      
      
     
     
      
       
      
     
     
      
       
      
     
     
      
       
      
     
     
      
       
      
     
     
    
   
  
  
   
   
  
 
 
  
   
   
   
    {{expandForm ? '收起' : '展开'}}

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-calendar-picker {
      width: 100%;
    }
  }
}


其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
            
            
                        

            网页题目：Angular封装搜索框组件操作示例            

            当前URL：http://cdkjz.cn/article/gigpoo.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    成都做手机网站瑞杰企业管理中国电信成都枢纽中心400电话申请眉山服务器租用成都商城网站制作江油做网站成都铁科精智测控和正兴机械云服务器                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图