Angular4.+ ngx-bootstrap Pagination 自定義分頁組件

時間 2019-11-12

標籤 angular4 angular ngx bootstrap pagination 自定義分頁組件欄目 AngularJS 简体版

原文原文鏈接

Angular4 隨筆（二） ——自定義分頁組件

1.簡介

　　本組件主要是實現了分頁組件顯示功能，經過使用 ngx-bootstrap Pagination分頁組件實現。javascript

　　基本邏輯：css

　　　　1.建立一個分頁組件，如：ng g component pagerhtml

　　　　2.父組件調用子組件，並向子組件傳入基礎配置信息java

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

4.分頁組件定義發射器，當頁碼發生變化時，發射通知bootstrap

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

2.準備工做

　　第一步：搭建Angular4 環境，能夠參考個人博客《Angular環境搭建》post

　　第二步：安裝ngx-bootstrap插件 this

　　　　　　使用Bootstrap4：url

　　　　　　　　打開命令窗口，在當前項目下運行指令 npm install ngx-bootstrap --save （推薦）

　　　　　　使用Bootstrap3：

　　第三步：注入PaginationModule

　　　　　　在當前調用分頁組件所在模塊ts文件中導入 PaginationModule 模塊，以下：

　　　　　　　　import { PaginationModule } from 'ngx-bootstrap/pagination';

　　　　　　並在import:[]中注入PaginationModule.forRoot()，如：

1   imports: [
2     CommonModule,
3     FormsModule,
4     ReactiveFormsModule,
5     RouterModule.forChild(homeRoutes),
6     PaginationModule.forRoot()
7   ],

3.代碼講解

　　第一步：建立分頁組件

　　　　ng g component pager

　　第二步：編寫分頁組件模板

1 <div>
2     <pagination [totalItems]="totalItems"  [(ngModel)]="currentPage"  [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" (pageChanged)="pageChanged($event)"  previousText="&lsaquo;" nextText="&rsaquo;" [boundaryLinks]="true" firstText="&laquo;"  lastText="&raquo;"  style="text-align: center;position: relative;left: 40%;"></pagination>
3 </div>

　　第三步：分頁組件ts文件代碼，以下：

 1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-pager',
 5   templateUrl: './pager.component.html',
 6   styleUrls: ['./pager.component.css']
 7 })
 8 export class PagerComponent implements OnInit {
 9   //存在多頁，顯示頁碼數量
10   maxSize:number = 3;
11   //每頁展現條數
12   itemsPerPage:number = 15;
13   //總條數
14   @Input() totalItems:number;
15   //當前頁碼
16   @Input() currentPage:number;
17   //定義發射器，當頁碼變化時候，將變化後的數據發射出去，供監聽者接收使用
18   @Output() pageChanges:EventEmitter<Page> = new EventEmitter();
19 
20   pageChanged(event: any): void {
21     //經過發射器發射數據，數據包含在event中
22     this.pageChanges.emit(event);
23   }
24 
25   constructor() {}
26 
27   ngOnInit() {
28   }
29   
30 
31 }
32 
33 export class Page{
34   constructor(
35     public itemsPerPage:number,
36     public page:number
37   ){
38     this.itemsPerPage = 15;
39     this.page = 1;
40   }
41 }

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

1   //分頁組件配置項
2   private itemsPerpage:number ;
3   //總條數
4   private totalcounts:number;
5   //當前頁碼
6   private currentPage:number = 1;

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

 1 <div class="card-body" style="font-size:14px;">
 2    <table class="table table-bordered ">
 3        <thead>
 4           <tr>
 5              <th>序號</th>
 6              <th>用戶名稱</th>
 7               <th>郵箱</th>
 8               <th>上次登陸</th>
 9               <th>狀態</th>
10               <th>操做</th>
11           </tr>
12         </thead>
13         <tbody >
14            <tr *ngFor="let user of users,let i = index;">
15                <td>{{(currentPage-1)*15+i+1}}</td>
16                <td>{{user.username}}</td>
17                <td>{{user.email}}</td>
18                <td>{{user.lastlogintime * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
19                <td><span class="badge badge-success">已啓用</span></td>
20                <td>
21                   <a href="javascript:;" (click)="switchToCheckUser(user)">查看</a>
22                   <a href="javascript:;" (click)="switchToEditUser(user)" style="margin-left:10px;">編輯</a>
23                   <a href="javascript:;" (click)="deleteUser(user)" style="margin-left:10px;">刪除</a>
24                </td>
25            </tr> 
26          </tbody>
27      </table>
28      <app-pager [totalItems]="totalcounts" [currentPage]="currentPage" (pageChanges)="pageChanged($event)"></app-pager>
29 </div>

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

1   //頁碼變化，從新獲取用戶列表數據
2   pageChanged(event){
3     //查看監聽到的數據
4     console.log('event:',event);
5     this.currentPage = event.page;
6     this.itemsPerpage = event.itemsPerPage;
7     //從新獲取用戶列表數據
8     this.getUserData();
9   }