如何在 Angular 2+ 中创建自定义分页？答案

【问题标题】：How to create Custom pagination in angular 2+?如何在 Angular 2+ 中创建自定义分页？
【发布时间】：2018-09-26 14:11:49
【问题描述】：

<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 分页，所以请不要提供这个答案，我想制作自己的分页组件。

对不起我的英语不好..

谢谢

【问题讨论】：

标签： angular pagination custompaging

【解决方案1】：

如果你知道 ngx-bootstrap 并且喜欢他们的组件但想要不同的外观，你可以在 github 上查看他们的分页组件的implementation，然后适应你的情况。

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

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

【讨论】：