如何在 angular 中进行这种（如图所示）分页

Question

我想使用 angular 获得类似的分页，我在图像中显示过它而不是上一个和下一个按钮。 我希望有人能帮我解决这个问题。

我的 HTML 代码：

 ***
<div class="row">
<div class='col-lg-8'></div>
<pagination-controls class="col-lg-4 my-pagination" 
    (pageChange)="page = $event"
    previousLabel="&lsaquo;"
    nextLabel="&rsaquo;"
    directionLinks="true"
    autoHide="true">
</pagination-controls>
</div>
***

Answer 1

你需要“在变量中”思考。 对于分页，您几乎需要两个变量

totalPages:number
pageIndex:number //better 0 for the first page, 1 for the second..

要显示“页面”，您需要创建一个数组

pages:string[]=new Array(this.totalPages).fill('.')
   .map((x,index)=>index)

现在您需要决定是要显示所有页面，还是只显示其中的一组。 例如，您有 10 页，但只想显示一些喜欢

   < 1,2,3,4,...>

在这种情况下，您需要另外两个变量

maxPagesShow:number //the max pages you show (in the e.g. 4)
fisrtPageShow:number //the first page you show 
                     //(in the e.g. 0 -remember it's more easy create 0-based)

您需要决定是要简单显示页面还是制作一点 animation。 （这在您编写 .html 时至关重要）

你看需要三个函数

nextPage(){..}
prevPage(){..}
selectPage(index:number){...}

每个按钮调用此函数，在函数中更改变量 - 如果您选择使用动画，则制作 animation - 并发出您在 output 中定义的 eventEmitter。