在现代 Web 应用中，数据分页是非常常见的需求。无论是展示商品列表、新闻列表还是用户列表，都需要对数据进行分页。Angular 框架提供了丰富的工具和组件来简化分页操作，本文将介绍如何实现数据分页。
准备工作
在开始编写代码之前，需要先安装 @angular/material 和 @angular/cdk，这两个库提供了实现分页所需的组件和服务。执行以下命令安装它们：
npm install @angular/material @angular/cdk --save
分页组件
Angular Material 提供了一个名为 MatPaginator 的组件，它允许用户在 UI 上选择要显示的页数。为了使用它，需要在组件模板中添加以下代码：
<mat-paginator [length]="totalItems" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 50]" (page)="pageEvent = $event"></mat-paginator>
其中，length 属性表示数据总条数，pageSize 属性表示每页显示的条数，pageSizeOptions 属性是一个可选的数组，它指定了允许用户选择的每页大小列表。page 事件会发生在用户更改显示的页面时，我们将该事件绑定到 pageEvent 变量上，后面将会用到它。
分页服务
Angular CDK 提供了一个名为 DataSource 的服务，它允许我们动态加载数据并分页。我们需要继承它并实现其中的两个方法 connect() 和 disconnect()。在 connect() 方法中，我们可以从后端或本地数据源中加载数据，并返回一个可观察对象。在 disconnect() 方法中，我们可以注销观察者。
-- -------------------- ---- -------
------ ------------------ ----------- ---- ---------------------------
------ ------------ ---------------- --- ---- -------
------ ------------ --------- ---- -----------------
------ ----- ---------------- ---------- ---------------- -
------- ----------- - --- ----------------------------
------- -------------- - --- --------------------------------
------ -------- - -----------------------------------
------------------- -------- ------------ --
------------------------- ------------------ ------------------ -
------ --------------------------------
-
---------------------------- ------------------ ---- -
----------------------------
-------------------------------
-
------------------- ------- --------- ------- -
-------------------------------
------------------------------- ---------------
------------- -- --------
----------- -- --------------------------------
-
--------------- -- -----------------------------
-
-在 loadData() 方法中，我们获取指定页面和大小的数据并将其加载到 dataSubject 中。此外，我们还可以处理错误和完成事件。
组件代码
现在我们已经准备好了分页组件和服务，让我们将它们组合在一起。在组件中，需要定义数据源和分页大小，然后在 ngOnInit() 方法中对数据源进行初始化。
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ------------ - ---- ------------------------------
------ - ---------------- - ---- -----------------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------ ---------- ------ -
----------- -----------------
----------------- -------- - ------ ------- -------- -----------
--------------- - ---- --- ----
-------- - ---
------------------------ ---------- -------------
------------------- ------------ ------------ --
---------- -
--------------- - --- -----------------------------------
--------------------------- ---------------
-
----------------- -
----------------------------------- -- -
----- --------- - ----------------
----- -------- - ---------------
----------------------------------- ----------
---
-
-在 ngAfterViewInit() 方法中，我们通过订阅 page 事件来获取所选页面和大小。然后，我们可以调用 loadData() 方法加载指定页面和大小的数据。
示例代码
下面是完整的代码示例，包括组件、服务和数据模型：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ------------ - ---- ------------------------------
------ - ---------------- - ---- -----------------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------ ---------- ------ -
----------- -----------------
----------------- -------- - ------ ------- -------- -----------
--------------- - ---- --- ----
-------- - ---
------------------------ ---------- -------------
------------------- ------------ ------------ --
---------- -
--------------- - --- -----------------------------------
--------------------------- ---------------
-
----------------- -
----------------------------------- -- -
----- --------- - ----------------
----- -------- - ---------------
----------------------------------- ----------
---
-
-
------ ------------------ ----------- ---- ---------------------------
------ ------------ ---------------- --- ---- -------
------ ------------ --------- ---- -----------------
------ - ---- - ---- ---------------
------ - ----------- - ---- -----------------
------ ----- ---------------- ---------- ---------------- -
------- ----------- - --- ----------------------------
------- -------------- - --- --------------------------------
------ -------- - -----------------------------------
------------------- -------- ------------ --
------------------------- ------------------ ------------------ -
------ --------------------------------
-
---------------------------- ------------------ ---- -
----------------------------
-------------------------------
-
------------------- ------- --------- ------- -
-------------------------------
------------------------------- ---------------
------------- -- --------
----------- -- --------------------------------
-
--------------- -- -----------------------------
-
-
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------------
-------------
------ ----- ----------- -
------- --- - ---------------------------------------------
------------------- ----- ----------- --
------------------ ------- --------- -------- ------------------ -
----- ---------- - --------- - ---------
----- -------- - ---------- - ---------
------ -------------------------------------
------- -- --------------------- ----------
--
-
-
------ --------- ---- -
--- -------
----- -------
------ -------
-------- -------
-总结
以上是关于在 Angular 中实现数据分页的一些详细介绍。通过 Angular Material 提供的 MatPaginator 组件和 Angular CDK 提供的 DataSource 服务，我们可以快速地实现数据分页。此外，我们还提供了一个完整的示例代码，以帮助读者更好地理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64882dd448841e98946af5be