Angular 自定义分页组件，自定义每页显示个数

最新推荐文章于 2023-11-02 16:46:02 发布

S筱潇S四维Smile

最新推荐文章于 2023-11-02 16:46:02 发布

阅读量1.7k

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_29483485/article/details/86607540

版权

本文介绍如何在Angular应用中创建一个自定义分页组件，实现前端分页功能。通过编写HTML、TypeScript代码，并在列表组件中使用，达到自定义每页显示条数的效果。

摘要由CSDN通过智能技术生成

后端返回列表是全部数据，分页前端做的，自定义分页组件实现前端分页，下图为分页效果：

1.创建page.component.html

<nav class="navigation">
    <ul class="pagination">
        <li [hidden]="pageTotal<11" class="page-item" (click)="goPage(1)">
            <a class="page-link" href="javascript:void(0);">首页</a>
        </li>
        <li class="page-item">
        <button type="button" class="page-link" aria-label="Previous" [disabled]="pageNumber===1" (click)="goPage(pageNumber-1)">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
        </button>
        </li>

        <li *ngFor = "let item of page(); let i = index" class="page-item" [ngClass]="{'active':pageNumber == item}" (click)="goPage(item)">
            <a class="page-link" href="javascript:void(0);">{
  {item==0?'...':item}}</a>
        </li>

        <li class="page-item">
        <button type="button" class="page-link" aria-label