Angular 分页器

分页器显示一个页面大小的下拉菜单供用户选择。可以通过 PageSizeOptions 设置此下拉菜单的选项。

当前页面大小将始终显示在下拉菜单中，即使它未包含在页面大小选项中。提供用于表格的带分页信息的导航。

每页的项目数

10

基本用法

每个分页器实例需要

• 每页的项目数（默认为 50）
• 要分页的项目的总数

当前页面索引默认为 0，但可以通过页面索引显式设置。

当用户与分页器交互时，将触发一个 PageEvent，该事件可用于更新任何关联的数据视图。

国际化

可以通过提供 MatPaginatorIntl 的实例来为分页器自定义标签。它将允许您更改以下内容

• 每个页面长度的标签。
• 向用户显示的类别文本。
• 导航按钮上的工具提示消息。

分页器使用 role="group" 在语义上对子控件进行分组。您必须将 aria-label 或 aria-labelledby 属性添加到 ，并使用描述分页控件处理的内容的标签。

您可以在 MatPaginatorIntl 中为分页器内的按钮和选择控件设置 aria-label 属性。

Angular 八分页组件

分页使用以下方式实现来自 npm 上的 JW-angular-pagination 包的组件。

安装

使用命令 npm install JW-angular-pagination 安装 Angular 8 分页组件。

与您的 Angular Eight 应用程序集成

将 JwPaginationComponent 导入到您的 Angular app.module.ts 并将其添加到声明数组中，以便在 Angular 模块中的其他组件中使用。

从示例中，这是应用程序模块 (app.module.ts)，分页组件在第 3 行导入，并在第 13 行添加到声明中。

用途

使用 Angular 8 分页组件有两个基本属性

• 项目 - 要分页的项目数组
• 更改页面 - 用于处理更改页面事件的回调函数
• 还有一些可选属性
• 页面大小 - 每页显示的项数（默认为 10）
• maxPages - 要在分页导航中显示的最大页面链接数（默认为 10）
• 初始页面 - 要显示的起始页面（默认为 1）

带分页的 Angular 8 组件示例。

它是示例中的应用程序组件 (app.component.ts)，它在 ngOnInit() 方法中创建一个硬编码的项目数组，并在 onChangePage() 回调方法中更新当前页面中的项目。

Angular 8 组件模板与分页示例

它是示例中的应用程序组件模板 (app.component.html)。分页组件使用 Angular 模型绑定属性 [item] = "item" 绑定到应用程序组件的 item 属性，并使用 Angular 事件绑定属性 (changePage) = ". onChangePage($event)" 绑定到应用程序组件的 onchangePage() 方法。

设置分页组件的样式

JW Angular 分页组件默认未设置样式；您可以使用以下 CSS 选择器添加您的自定义样式。

您还可以插入 Bootstrap (3.x 或 4.x)，该组件与该组件配合良好，这就是我在示例中使用的。

• .pagination - 分页组件容器（ul 元素）
• .pagination .page-item - 分页组件中的所有列表项
• .pagination .page-item .page-link - 所有分页链接，包括第一个、最后一个、上一个和下一个
• .pagination .number-item - 所有页码（1、2、3 等）分页元素
• .pagination .first-item - “第一个”分页元素
• .pagination .last-item - “最后一个”分页元素
• .pagination .previous-item - “上一个”分页元素
• .pagination .next-item - “下一个”分页元素

隐藏分页按钮

要隐藏任何按钮，您可以使用上面描述的 CSS 选择器将其设置为 display: none。

更多自定义 Angular 分页组件

如果要进行其他自定义，例如更改组件的 HTML 模板，我建议您将分页组件代码复制到您的自定义 Angular 组件中。

要使用此方法，您需要使用命令 npm install jw-paginate 从 npm 安装 jw-paginate 包。这是完整的分页组件代码，也可以在此处在 GitHub 上找到。