在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

一些提示：

• 在加载html
之前创建一个包含1,2,3,4,5 ... MAX的页面数组
• 如果新页面大于当前+/- 5
，则单击下一页，上一页或直接在页面上重新创建阵列

Answer 2

您可以尝试使用ngx-pagination v3.1.0

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

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