Angular4.x 自定義搜索組件

Angular4 隨筆（三）  ——自定義搜索組件

1.簡介

　　本組件主要是實現了搜索功能，主要是經過父子組件傳值實現。

　　基本邏輯：

　　　　1.建立一個搜索組件，如：ng g component  search

　　　　2.父組件調用子組件，並向子組件傳入基礎配置信息，如搜索框默認提示信息等。

　　　　3.搜索組件接收父組件傳參，並在模板上進行配置，在html模板上定義點擊事件，調用分頁子組件自身一個方法

     　　  4.搜索組件定義發射器，當觸發搜索按鈕的點擊事件時，發射通知

　　　　5.父組件模板調用搜索組件處，監聽搜索組件發射方法，並調用自身組件方法，接收搜索組件發射攜帶的數據，執行自身業務邏輯

2.準備工做

　　搭建Angular4 環境，能夠參考 個人博客 《Angular環境搭建》

　　在項目中引入bootstrap4

3.代碼講解

　　第一步：建立搜索組件

　　　　ng g component search

　　第二步：編寫搜索組件模板

　　　　

1 <form class="form-inline" style="float:right;margin-top:-0.7%;" ngNoForm>
2     <div class="form-group" class="pull-right">
3         <label class="sr-only" for="exampleInputAmount"></label>
4         <div class="input-group" id="search" >
5             <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;"/>
6             <div class="input-group-addon" (click)="searchDataByContent()" style="border: solid 1px #e0e0e0;border-left: 0px;padding: 5px;" ><i class="fa fa-search"></i></div>
7         </div>
8     </div>
9 </form>

　　說明：

　　　　[(ngModel)]="search"，是搜索組件定義一個屬性，用來存儲搜索框輸入的搜索內容；
　　　　placeholder="{{placeholder}}"，是搜索組件定義的一個屬性，接收父組件傳入的值，當搜索組件沒有填寫值時，默認顯示父組件傳入的文字；
　　　　searchDataByContent，是搜索組件自定義的一個點擊事件，當搜索按鈕被點擊時候，這個方法被觸發，想父組件發射數據；

　　第三步：搜索組件ts文件代碼，以下：

　　　　

 1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 2 import { Station } from '../stationlist/stationlist.component';
 3 
 4 @Component({
 5   selector: 'app-search',
 6   templateUrl: './search.component.html',
 7   styleUrls: ['./search.component.css']
 8 })
 9 export class SearchComponent implements OnInit {
10 
11   @Input() placeholder:string;
12 
13   //過濾內容--過濾關鍵字
14   @Input() search:string;
15   //子組件傳遞給父組件的發射器
16   @Output()  changeStation:EventEmitter<string> = new EventEmitter();
17 
18   
19   constructor() { 
20   }
21 
22   ngOnInit() {
23     
24   }
25 
26   searchDataByContent(){
27     this.changeStation.emit(this.search);
28   }
29 
30 }

 

　　第四步：父組件ts文件中配置傳入搜索組件配置項，如：

　　　　

1   //搜索內容
2   private content:string = "";
3   //搜索組件配置項
4   private placeholder:string = "請輸入用戶名稱";
5   //搜索組件字段
6   private filterField:string = "username";

　　說明：能夠根據本身的實際須要，經過這種方式，配置配置項

　　第五步：父組件html模板調用子組件，代碼以下：

　　　　

 1 <div class="content-box" >
 2   <div class="row">
 3       <div class="col-md-12">
 4           <div class="card">
 5               <div class="card-header" style="line-height: 14px;background-color: #fff;font-size: 14px;">
 6                   <i class="glyphicon glyphicon-flag" ></i>用戶列表
 7                   <app-search  [placeholder]="placeholder"  (changeStation)="userChange($event)"></app-search>
 8               </div>
 9 
10 
11               <div class="card-body" style="font-size:14px;">
12                   <table class="table table-bordered ">
13                       <thead>
14                           <tr>
15                               <th>序號</th>
16                               <th>用戶名稱</th>
17                               <th>郵箱</th>
18                               <th>上次登陸</th>
19                               <th>狀態</th>
20                               <th>操做</th>
21                           </tr>
22                       </thead>
23                       <tbody >
24                           <tr *ngFor="let user of users,let i = index;">
25                               <td>{{(currentPage-1)*15+i+1}}</td>
26                               <td>{{user.username}}</td>
27                               <td>{{user.email}}</td>
28                               <td>{{user.lastlogintime * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
29                               <td><span class="badge badge-success">已啓用</span></td>
30                               <td>
31                                 <a href="javascript:;" (click)="switchToCheckUser(user)">查看</a>
32                                 <a href="javascript:;" (click)="switchToEditUser(user)" style="margin-left:10px;">編輯</a>
33                                 <a href="javascript:;" (click)="deleteUser(user)" style="margin-left:10px;">刪除</a>
34                               </td>
35                           </tr> 
36                       </tbody>
37                   </table>
38                   <app-pager [totalItems]="totalcounts" [currentPage]="currentPage" (pageChanges)="pageChanged($event)"></app-pager>
39               </div>
40           </div>
41       </div>
42   </div>
43 </div>

　　說明：

　　　　(changeStation)="userChange($event)"，其中「changeStation」是搜索組件發射的發射器名字，在父組件中主要是起到監聽搜索組件發射器做用，當搜索組件發射數據時，這個監聽事件唄觸發，調用userChange($event)這個方法；

　　　　userChange($event)，這個方法是定義在父組件裏面的一個方法，經過$event瀏覽器事件，咱們能夠拿到搜索組件發射過來的數據；

　　第六步：父組件定義監聽頁碼變化的 userChange($event)方法，代碼以下：

　　　　

1   //根據搜索內容更新用戶列表
2   userChange(filterContent:string){
3     this.currentPage = 1;
4     this.content = filterContent;
5     this.sign = 2;
6      //從新獲取用戶列表數據
7      this.getUserData();
8   }

 

4.運行截圖

　　　　搜索前：

　　　　

 　　　　搜索後：