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

　　　　搜索前：

　　　　

 　　　　搜索后：