在 MEAN Stack 中添加分页组件

从本节开始，我们将启动 MEAN Stack 的一个新模块。在之前的模块中，我们添加了图片上传，在本模块中，我们将添加分页组件并在我们的应用程序中使用它们。在本节中，我们将学习如何在 MEAN Stack 中添加分页组件。

分页是将网站的内容，或网站的一部分内容，分成离散页面的过程。Web 应用程序中的分页通常由代码控制，该代码通常按从最新到最旧的顺序排列数据集项目。

现在，我们将处理分页，这意味着我们需要控制始终显示所有帖子，但我们可以在不同页面之间切换。因此，在不同的帖子集之间，我们只在第一页显示两个帖子，在第二页显示两个帖子，在第三页显示两个帖子，并且我们可以在这些页面之间切换以加载每个页面的相应帖子。

这是一个常见的模式，因为我们不想默认下载所有帖子，因为如果我们的数据库中有更多帖子，我们将下载大量数据，这不仅意味着我们在网络上传输更多数据，还意味着我们显示大量数据，用户可能难以浏览。

我们实现分页的方式将使用户可以灵活地决定用户希望在给定页面上显示多少帖子。为此，我们将使用 Angular Material 提供的特殊组件。如果我们转到 Angular Material 的官方网站，我们将看到那里的分页器，它将是数据表的一部分。分页器将如下所示

我们将使用以下步骤在我们的应用程序中实现这一点

1) 我们将转到我们的 **module.ts** 文件，并通过从 **'@angular/material'** 导入 MatPaginatorModule 来解锁 MatPaginatorModule。我们还将它添加到我们的“imports”数组中，就像我们之前添加其他模块一样。完成此操作后，此模块将被解锁，我们可以使用它。

2) 现在，我们将回到我们的 post-list 组件的 html 文件，在 **</mat-accordion>** 下面，我们将添加 **<mat-paginator>**，就像

3) 这个分页器需要一些配置，因为如果我们只是这样添加它并回到我们的 Angular 应用程序，我们将看到它带有一些默认设置。

4) 我们想要自定义每页获取的页面或项目数量，并定义我们当前所在的页面等等。因此，我们将添加一些属性。第一个属性是 length 属性，它只是允许我们定义我们总共有多少项目，稍后，我们将从后端动态获取它。我们将回到我们的 post-list.component.ts 文件，在这里我们初始化一个属性 totalposts 并将值设置为十作为默认值。

现在，我们将回到我们的 html 文件，并通过将 length 包装在方括号中，将 length 绑定到 totalposts，就像

如果我们回到我们的应用程序，我们将看到我们在这里注册了十个帖子。

5) 我们将通过绑定 pageSize 属性来设置我们当前所在的页面。pageSize 也必须绑定到一个数字，因此我们将添加一个新的公共属性，即 postperpage，并且我们将默认将其设置为 2。

我们现在将我们的 pageSize 属性绑定到 postperpage，就像

6) 我们还想添加一个下拉列表，用户可以在其中选择用户希望在给定页面上看到多少项目。为此，我们将在我们的 typescript 文件中创建另一个公共属性。我们将它命名为 **pageSizeOption**。此属性应该是选项的数组，如 1、2、5 和 10。

现在，用户将能够在每页 1 到 5 个和 10 个项目之间进行选择。我们将它绑定到 mat-paginator 上的另一个属性，即 **pageSizeOption**，像这样

现在，如果我们保存这两个文件并回到我们的 Angular 应用程序，我们将看到我们的虚拟分页器具有所有这三个功能。

7) 现在，如果我们使用它，它什么也不做。为此，我们需要监听一个事件，并且每当我们更改每页的项目数或当前页面时都会发出该事件，该事件是 page 事件。我们将调用方法名称 onChangedPage 并转发此 @angular/material 分页器提供给我们的事件对象。我们可以像往常一样使用 $event 访问它，这将在我们切换页面时调用 onChangedPage() 方法，它会给我们一些关于 page 事件的信息。

8) 现在，我们将转到我们的 post-list 组件的 typescript 文件，在这里我们添加我们的 onChangedPage() 方法。我们知道我们得到一些页面数据，它将是 PageEvent 类型。PageEvent 是一种需要从 @angular/material 导入的类型。

PageEvent 是一个对象，包含一些关于当前页面的数据。我们登录到控制台以查看其中的内容。

我们将回到我们的应用程序，如果我们切换页面，我们会得到一个对象，其中包含关于分页器已知的当前最大项目数的信息，我们得到关于当前页面索引的信息，我们得到关于在该下拉列表中选择的当前页面大小的信息，以及我们得到最后一个页面索引。

我们现在将使用该数据来缩小我们从后端检索的项目数量。我们必须在后端做一些工作，在此之前，我们将在分页器和我们的手风琴之间添加一些间距，以便我们再次在底部具有阴影。

9) 我们将编写 CSS 代码，用于在它们之间添加一些间距。我们将使用 **mat-paginator** 作为 CSS 选择器 并将 margin-top 设置为 1rem。

现在，如果我们回到我们的 Angular 应用程序，我们将看到我们的 mat-accordion 和 mat-paginator 之间的间距。

在下一节中，我们将致力于后端代码，以缩小我们检索的项目数量。