Angular4.x 自定义搜索组件

Angular4 随笔（三）  ——自定义搜索组件

1.简介

　　本组件主要是实现了搜索功能，主要是通过父子组件传值实现。

　　基本逻辑：

　　　　1.创建一个搜索组件，如：ng g component  search

　　　　2.父组件调用子组件，并向子组件传入基础配置信息，如搜索框默认提示信息等。

　　　　3.搜索组件接收父组件传参，并在模板上进行配置，在html模板上定义点击事件，调用分页子组件自身一个方法

　　  4.搜索组件定义发射器，当触发搜索按钮的点击事件时，发射通知

　　　　5.父组件模板调用搜索组件处，监听搜索组件发射方法，并调用自身组件方法，接收搜索组件发射携带的数据，执行自身业务逻辑

2.准备工作

　　搭建Angular4 环境，可以参考 我的博客 《Angular环境搭建》

　　在项目中引入bootstrap4

3.代码讲解

　　第一步：创建搜索组件

　　　　ng g component search

　　第二步：编写搜索组件模板

　　　　

 <form class="form-inline" style="float:right;margin-top:-0.7%;" ngNoForm>
     <div class="form-group" class="pull-right">
         <label class="sr-only" for="exampleInputAmount"></label>
         <div class="input-group" id="search" >
             <input type="text" class="form-control" [(ngModel)]="search" id="exampleInputAmount"  placeholder="{{placeholder}}" style="height:28px;width:80%;float:right;font-size: 14px;border-radius: 0px;"/>
             <div class="input-group-addon" (click)="searchDataByContent()" style="border: solid 1px #e0e0e0;border-left: 0px;padding: 5px;" ><i class="fa fa-search"></i></div>
         </div>
     </div>
 </form>

　　说明：

　　　　[(ngModel)]="search"，是搜索组件定义一个属性，用来存储搜索框输入的搜索内容；
　　　　placeholder="{{placeholder}}"，是搜索组件定义的一个属性，接收父组件传入的值，当搜索组件没有填写值时，默认显示父组件传入的文字；
　　　　searchDataByContent，是搜索组件自定义的一个点击事件，当搜索按钮被点击时候，这个方法被触发，想父组件发射数据；

　　第三步：搜索组件ts文件代码，如下：

　　　　

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Station } from '../stationlist/stationlist.component';

 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.css']
 })
 export class SearchComponent implements OnInit {

   @Input() placeholder:string;

   //过滤内容--过滤关键字
   @Input() search:string;
   //子组件传递给父组件的发射器
   @Output()  changeStation:EventEmitter<string> = new EventEmitter();

   constructor() {
   }

   ngOnInit() {

   }

   searchDataByContent(){
     this.changeStation.emit(this.search);
   }

 }

　　第四步：父组件ts文件中配置传入搜索组件配置项，如：

　　　　

   //搜索内容
   private content:string = "";
   //搜索组件配置项
   private placeholder:string = "请输入用户名称";
   //搜索组件字段
   private filterField:string = "username";

　　说明：可以根据自己的实际需要，通过这种方式，配置配置项

　　第五步：父组件html模板调用子组件，代码如下：

　　　　

 <div class="content-box" >
   <div class="row">
       <div class="col-md-12">
           <div class="card">
               <div class="card-header" style="line-height: 14px;background-color: #fff;font-size: 14px;">
                   <i class="glyphicon glyphicon-flag" ></i>用户列表
                   <app-search  [placeholder]="placeholder"  (changeStation)="userChange($event)"></app-search>
               </div>

               <div class="card-body" style="font-size:14px;">
                   <table class="table table-bordered ">
                       <thead>
                           <tr>
                               <th>序号</th>
                               <th>用户名称</th>
                               <th>邮箱</th>
                               <th>上次登录</th>
                               <th>状态</th>
                               <th>操作</th>
                           </tr>
                       </thead>
                       <tbody >
                           <tr *ngFor="let user of users,let i = index;">
                               <td>{{(currentPage-1)*15+i+1}}</td>
                               <td>{{user.username}}</td>
                               <td>{{user.email}}</td>
                               <td>{{user.lastlogintime * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                               <td><span class="badge badge-success">已启用</span></td>
                               <td>
                                 <a href="javascript:;" (click)="switchToCheckUser(user)">查看</a>
                                 <a href="javascript:;" (click)="switchToEditUser(user)" style="margin-left:10px;">编辑</a>
                                 <a href="javascript:;" (click)="deleteUser(user)" style="margin-left:10px;">删除</a>
                               </td>
                           </tr>
                       </tbody>
                   </table>
                   <app-pager [totalItems]="totalcounts" [currentPage]="currentPage" (pageChanges)="pageChanged($event)"></app-pager>
               </div>
           </div>
       </div>
   </div>
 </div>

　　说明：

　　　　(changeStation)="userChange($event)"，其中“changeStation”是搜索组件发射的发射器名字，在父组件中主要是起到监听搜索组件发射器作用，当搜索组件发射数据时，这个监听事件呗触发，调用userChange($event)这个方法；

　　　　userChange($event)，这个方法是定义在父组件里面的一个方法，通过$event浏览器事件，我们可以拿到搜索组件发射过来的数据；

　　第六步：父组件定义监听页码变化的 userChange($event)方法，代码如下：

　　　　

   //根据搜索内容更新用户列表
   userChange(filterContent:string){
     this.currentPage = 1;
     this.content = filterContent;
     this.sign = 2;
      //重新获取用户列表数据
      this.getUserData();
   }

4.运行截图

　　　　搜索前：

　　　　

　　　　搜索后：