限制angular4中的分頁

Question

我嘗試在angular4中應用分頁，但是我不知道如何在分頁中應用限制。限制：例如，我有1000個分頁，在前5個分頁中如何顯示，然后在最后一頁中顯示：1 2 3 4 5。 ...1000。在我的代碼中，我顯示所有的分頁1000的分頁，但對客戶而言並不是很好的設計：

代碼部分：

addClass(x)
{
    $(".page-item").click(function () {
        $(this).addClass("current").siblings().removeClass('current');
    });
}

next()
{ 
    $('.current').next('.page-item').trigger('click'); 
}
previous()
{
     $('.current').prev('.page-item').trigger('click'); 
}

代碼html：

<ul>
   <li class="previous" (click)="previous()">Previous</li>
   <li class="next" (click)="next()">Next</li>
</ul>
<ul class="pagination">
<li *ngFor="let x of pages" class='page-item' (click)='addClass(x)'>
    {{x}}
</li>

這是我頁面中顯示的屏幕截圖：

Answer 1

一些提示：

• 創建一個包含1,2,3,4,5 ... MAX的頁面數組，然后再加載html
• 如果下一頁，上一頁或直接在頁面上單擊，則在新頁面大於當前+/- 5的情況下，您將重新創建數組

Answer 2

您可以嘗試ngx-pagination v3.1.0

https://github.com/michaelbromley/ngx-pagination

https://stackblitz.com/edit/angular-e1f9hq