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.运行截图
搜索前：
搜索后：