如何自定义 <pagination-controls> 可见性答案

【问题标题】：How to customize <pagination-controls> visibility如何自定义 <pagination-controls> 可见性
【发布时间】：2019-05-12 10:18:13
【问题描述】：

我正在使用这个“ https://www.npmjs.com/package/ngx-pagination" 用于分页。

工作代码： https://stackblitz.com/edit/angular-e1f9hq.

这里我想删除文本“Previous”和“Last”“”。

我只想保留箭头图标。我也想更改所选的页码框颜色。但我不知道如何改变这一点。谁能帮帮我。

【问题讨论】：

标签： javascript css angular typescript pagination

【解决方案1】：

要删除这些，只需将 previousLabel="" 和 nextLabel="" 添加到您的分页控件中，现在将变为

<pagination-controls (pageChange)="p = $event"
    previousLabel=""
    nextLabel=""
    ></pagination-controls>

所以你 app.component.html 会是：

<div class="text-center">
  <h1>ngx-pagination live demo</h1>
  <h4><small><a href="https://github.com/michaelbromley/ngx-pagination">GitHub Repo</a></small></h4>
  <p>A bare-bones demo for your experimenting / bug-reproducing pleasure.</p>
</div>
<div class="list">
  <ul>
    <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li>
  </ul>

  <pagination-controls (pageChange)="p = $event" previousLabel="" nextLabel=""></pagination-controls>
</div>

【讨论】：

需要在previousLabel和nextLabel里面加单引号：nextLabel=" ' ' ", 不能有空格
哇，它就像一个魅力。谢谢@AlqbalRaj。你能告诉我你是怎么知道的吗？
Ngx-pagination 文档有这个以及分页控制的其他选项... CSS 不起作用，因为它在 iFrame 中
所以我不能在这个分页中使用 CSS？