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.运行截图

　　　　搜索前：

　　　　搜索后：

巴特西

Angular4.x 自定义搜索组件

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

1.简介

2.准备工作

3.代码讲解

4.运行截图

最新文章

热门文章