امروز ما یاد می گیریم که چگونه یک کامپوننت سفارشی برای Pagination در Angular ایجاد کنیم و همچنین، چگونه ازیک کامپوننت در کامپوننت دیگر به عنوان یک child component استفاده کنیم.

پیش نیازها

دانش اولیه از کامپوننت ها و ماژول های Angular و TypeScript

در اینجا، ما یک کامپوننت سفارشی برای pagination ایجاد می کنیم و به شما نشان خواهیم داد که چگونه از آن استفاده کنید. قبل ازآن، شما باید دانش اولیه در مورد انگولار را داشته باشید.

ما فرض می کنیم که شما قبلاً یک برنامه انگولار ساخته اید. در اینجا، ما نحوه ایجاد یک  component در برنامه ساخته شده یتان را نشان خواهیم داد.

توجه

ما از bootstrap 4 برای طراحی کامپوننت pagination استفاده می کنیم، بنابراین، شما باید بسته bootstrap را نیز در برنامه یتان نصب کنید.

قدم اول

پوشه ای به نام app-pagination در پوشه component برنامه خود ایجاد کنید. همه کامپوننت ها و ماژول ها را فقط در این پوشه ایجاد خواهیم کرد.

قدم دوم

اکنون، ما کامپوننتی برای pagination ایجاد می کنیم. با اجرای دستور زیر در دایرکتوری     app-pagination  که در مرحله اول ایجاد کردیم، می توانید کامپوننت را ایجاد کنید.

ng generate component app-pagination 

دستور بالا پرونده های ts. و html. برای کامپوننت ما را تولید می کند.

کد زیر را در app-pagination.component.tsجایگذاری کنید.

app.pagination.component.ts

    import { Component , Input , OnChanges , Output , EventEmitter} from '@angular/core';  
      
    @Component({  
      selector: 'app-pagination',  
      templateUrl: './app-pagination.component.html'  
    })  
      
    export class PaginationComponent implements OnChanges {  
      
        @Input() totalRecords = 0;  
        @Input() recordsPerPage = 0;  
      
        @Output() onPageChange: EventEmitter<number> = new EventEmitter();  
      
        public pages: number [] = [];  
        activePage: number;  
      
        ngOnChanges(): any {  
          const pageCount = this.getPageCount();  
          this.pages = this.getArrayOfPage(pageCount);  
          this.activePage = 1;  
          this.onPageChange.emit(1);  
        }  
      
        private  getPageCount(): number {  
          let totalPage = 0;  
      
          if (this.totalRecords > 0 &amp;amp;amp;&amp;amp;amp; this.recordsPerPage > 0) {  
            const pageCount = this.totalRecords / this.recordsPerPage;  
            const roundedPageCount = Math.floor(pageCount);  
      
            totalPage = roundedPageCount < pageCount ? roundedPageCount + 1 : roundedPageCount;  
          }  
      
          return totalPage;  
        }  
      
        private getArrayOfPage(pageCount: number): number [] {  
          const pageArray = [];  
      
          if (pageCount > 0) {  
              for(let i = 1 ; i <= pageCount ; i++) {  
                pageArray.push(i);  
              }  
          }  
      
          return pageArray;  
        }  
      
        onClickPage(pageNumber: number): void {  
            if (pageNumber >= 1 &amp;amp;amp;&amp;amp;amp; pageNumber <= this.pages.length) {  
                this.activePage = pageNumber;  
                this.onPageChange.emit(this.activePage);  
            }  
        }  
    }  

اینجا، ما کامپوننت pagination را ایجاد کرده ایم. این کامپوننت دو ورودی TotalRecords و  RecordsPerPage را می پذیرد.

1- RecordsPerPage برای تعداد آیتم هایی که می خواهیم در single page  نمایش دهیم استفاده می شود.

2- TotalRecords برای شمارش تعداد کل آیتم هایی که می خواهیم در صفحات نمایش دهیم استفاده می شود.

همچنین، ما EventEmitter را ایجاد کرده ایم که هر زمان روی شماره صفحه کلیک کنیم، شماره صفحه فعلی را به کامپوننت parent اصلی ارسال می کند.

قدم سوم

کد زیر را در پرونده برنامه pagination.component.html  قرار دهید.

    <nav aria-label="page navigation example">  
      <ul class="pagination">  
        <li class="page-item" (click)="onClickPage(activePage - 1)"><a class="page-link" href="javascript:void(0);">«  
            Previous</a></li>  
        <li class="page-item" [ngClass]="{'active': activePage === item}" *ngFor="let item of pages"  
          (click)="onClickPage(item)"><a class="page-link" href="javascript:void(0);">{{item}}</a></li>  
        <li class="page-item" (click)="onClickPage(activePage + 1)"><a class="page-link" href="javascript:void(0);">Next  
            »</a></li>  
      </ul>  
    </nav>  

در اینجا، ما الگوی HTML را برای کامپوننت خود اضافه کردیم. از دستورالعمل ngFor* برای تکرار بیش از کل تعداد صفحات و نمایش آن صفحات در عنصر li استفاده کرده ایم. ما رویداد کلیک li را به متدonClickPage()  که در app-pagination.component.ts  تعریف کرده ایم پیوند داده ایم.

قدم چهارم

اکنون، ماژول مربوط به کامپوننت ایجاد شده در بالا را می سازیم تا بتوانیم از این کامپوننت در کامپوننت های دیگر استفاده کنیم.

توجه

شما می توانید با ارائه مستقیم این کامپوننت در فایل app.module.ts بدون ایجاد ماژول جداگانه، از آن استفاده کنید. اما این روش lazy loading را امکان پذیر نمی کند. برای فعال کردن مزیت lazy loading، این component را در یک ماژول جداگانه تعریف خواهیم کرد.

فایل app pagination.module.ts را در دایرکتوری app-pagination که در مرحله اول ساختیم ایجاد کرده و کد زیر را در آن بگذارید.

    import { NgModule } from '@angular/core';  
    import { CommonModule} from '@angular/common';  
      
    import {PaginationComponent} from './app-pagination.component';  
      
    @NgModule({  
        declarations: [  
            PaginationComponent  
        ],  
        imports: [  
            CommonModule  
        ],  
        exports: [  
            PaginationComponent  
        ]  
    })  
    export class PaginationModule  
    {  
    }  

در اینجا، ما کامپوننت  خود را در [] declaration تعریف کرده و همان کامپوننت را اکسپورت کرده ایم تا بتوانیم از آن در ماژول دیگری استفاده کنیم. کامپوننت ما آماده استفاده در کامپوننت های دیگر است. اکنون، نحوه استفاده از این pagination component را در کامپوننت های  دیگر نشان خواهیم داد.

توجه

برای سادگی، ما از این کامپوننت app.component استفاده می کنیم. اما شما می توانید از هر کامپوننت دیگری استفاده کنید.

قدم پنجم

PaginationModule ایجاد شده در مرحله بالا را در فایل app.module.ts وارد کنید تا بتوانیم از کامپوننت ایجاد شده در app.component استفاده کنیم.

قدم ششم

کد زیر را درفایل app.component.ts جایگذاری کنید.

    import { Component } from '@angular/core';  
      
    @Component({  
      selector: 'app-root',  
      templateUrl: './app.component.html',  
      styleUrls: ['./app.component.scss']  
    })  
    export class AppComponent {  
      activePage:number = 0;  
      
      displayActivePage(activePageNumber:number){  
        this.activePage = activePageNumber  
      }  
    }  

در اینجا، ما یک متد ایجاد کرده ایم، به عنوان مثال ()displayActivePage برای گرفتن value اکسپورت شده صفحه فعال از child component.

قدم هفتم

کد زیر را درفایل app.component.html جایگذاری کنید.

    <div class="container">  
        <div class="row">  
            <div class="col-md-12 text-center">  
                <h4>Simple Table</h4>  
            </div>  
            <div class="col-lg-8 col-md-10 ml-auto mr-auto">  
                <div class="table-responsive">  
                    <table class="table table-striped">  
                        <thead>  
                            <tr>  
                                <th class="text-center">#</th>  
                                <th>Product Name</th>  
                                <th>Type</th>  
                                <th>Qty</th>  
                                <th class="text-right">Price</th>  
                                <th class="text-right">Amount</th>  
                            </tr>  
                        </thead>  
                        <tbody>  
                            <tr>  
                                <td class="text-center">1</td>  
                                <td>Moleskine Agenda</td>  
                                <td>Office</td>  
                                <td>25</td>  
                                <td class="text-right">€ 49</td>  
                                <td class="text-right">€ 1,225</td>  
                            </tr>  
                            <tr>  
                                <td class="text-center">2</td>  
                                <td>Stabilo Pen</td>  
                                <td>Office</td>  
                                <td>30</td>  
                                <td class="text-right">€ 10</td>  
                                <td class="text-right">€ 300</td>  
                            </tr>  
                            <tr>  
                                <td class="text-center">3</td>  
                                <td>A4 Paper Pack</td>  
                                <td>Office</td>  
                                <td>50</td>  
                                <td class="text-right">€ 10.99</td>  
                                <td class="text-right">€ 109</td>  
                            </tr>  
                            <tr>  
                                <td class="text-center">4</td>  
                                <td>Apple iPad</td>  
                                <td>Meeting</td>  
                                <td>10</td>  
                                <td class="text-right">€ 499.00</td>  
                                <td class="text-right">€ 4,990</td>  
                            </tr>  
                            <tr>  
                                <td class="text-center">5</td>  
                                <td>Apple iPhone</td>  
                                <td>Communication</td>  
                                <td>10</td>  
                                <td class="text-right">€ 599.00</td>  
                                <td class="text-right">€ 5,999</td>  
                            </tr>  
                        </tbody>  
                    </table>  
                </div>  
            </div>  
        </div>  
        <div class="row">  
                <div class="col-lg-8 col-md-10 ml-auto mr-auto">  
                    <span><strong>Current Active Page = </strong> {{activePage}}</span>  
                </div>  
        </div>  
        <div class="row">  
            <div class="col-lg-8 col-md-10 ml-auto mr-auto">  
                 <div class="float-right"> <app-pagination [totalRecords]="23" [recordsPerPage]="5" (onPageChange)="displayActivePage($event)"></app-pagination> </div>     
            </div>  
        </div>  
    </div>  

جمع بندی

ما pagination component را با موفقیت ایجاد کردیم و همچنین از کامپوننت ایجاد شده در app.component.ts استفاده کردیم.