时间戳

首页 > 解决方案 > 如何在 Angular 2+ 中创建自定义分页？

angular - 如何在 Angular 2+ 中创建自定义分页？

问题描述

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

我是角度新手，请帮助...

我想在我的自定义分页组件上使用上面的引导分页代码，并且当我在另一个组件 html 中使用分页组件时

(app-paginate [somedata]="somevalue" and event> _______ (/app-paginate>

它应该工作...

注意：我已经使用了 ngx-bootstrap 分页，所以请不要提供这个答案，我想制作自己的分页组件。

对不起我糟糕的英语..

谢谢你

标签： angularpaginationcustompaging

解决方案

如果您知道 ngx-bootstrap 并且喜欢他们的组件但想要不同的外观，您可以在 github 上查看他们对分页组件的实现，然后根据您的情况进行调整。

这是上一个按钮的自定义版本的示例，其打字稿代码大致相同：

<li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasPrevious() || disabled">
    <a aria-label="Previous" i18n-aria-label="@@pagination.previous-aria"class="page-link" href (click)="!!selectPage(page-1)"
      [attr.tabindex]="(hasPrevious() ? null : '-1')">
      <myCustomIcon aria-hidden="true"></myCustomIcon >
      <span class="sr-only" i18n="@@pagination.previous"></span>
    </a>
  </li>

推荐阅读