限制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