在 Web 应用程序中，显示空状态是一个很常见的需求，例如，在一个列表或表格中没有数据时，我们需要显示一个友好的提示。 在本文中，我们将使用 Angular 和 RxJS 来优雅地实现这一需求。
什么是 RxJS
RxJS 是一个用于使用可观测序列进行异步和基于事件的编程的库。 它通过提供多个操作符和附加器来改善应用程序的性能和可维护性。
如何在 Angular 中使用 RxJS
在 Angular 中使用 RxJS 首先需要将 RxJS 引入 Angular 项目中。 在 app.module.ts 中导入以下模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ----------------------- ------ - ----------------------- - ---- --------------------------------------- ------ - ----------- - ---- ----------------- ------ - -- - ---- ------- ------ - ----------- ---- --------- - ---- -----------------
以上代码中，我们导入了 RxJS 中的 of、catchError、map 和 startWith 这一组件。
如何显示空状态
创建组件
现在，我们将在 Angular 中创建一个组件 EmptyStateComponent，用于显示空状态。 它有一个属性 showEmptyState，在没有数据时会被设置为 true，并在有数据时会被设置为 false。在 EmptyStateComponent.html 文件中添加以下代码：
<div *ngIf="showEmptyState"> <h3>没有数据</h3> </div>
观察数据
使用 RxJS，我们可以轻松地观察到数据是否为空。 在我们的组件中，我们可以使用 data$ 观察数据是否为空。通过管道，data$ 将返回一个 Observable 对象，当数据为空或存在时，showEmptyState 属性将被设置为 true 或 false。在组件 EmptyStateComponent.ts 中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ ------ - ---- ----------------
------ - -- - ---- -------
------ - ----------- ---- --------- - ---- -----------------
------------
--------- ------------------
------------ -------------------------------
---------- --------------------------------
--
------ ----- ------------------- ---------- ------ -
-------------- - ------
-------- ------
---------- -
----------------
---------- -- ------------------------ --- ---
------------------ -- ----------
----------------
--------------------- -- -
------------------- - --------
---
-
-以上代码中，我们使用 map 操作符将数据转化为 true 或 false。使用 catchError 操作符帮助我们处理错误，使用 startWith 操作符设置默认值。 最后，使用 subscribe 操作符订阅数据，并将 showEmptyState 属性分配为对应值。
在其他组件中使用 EmptyStateComponent
现在我们可以在其他组件中使用 EmptyStateComponent 了，当要显示空状态时，我们可以将 data$ 属性设置为空或者 undefined；在有数据需要展示时，我们可以将 data$ 属性赋值为数据。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ - --- --------------------
------------- -
-- -----
---------------------
-
------------ -
-- ----
-------------------------------------
-
------------- -
------ -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
--
-
-以上代码中，我们将 users$ 属性作为可观察者流传递给 EmptyStateComponent。
最后，在我们的模板中使用 EmptyStateComponent：
<app-empty-state [data$]="users$"></app-empty-state>
示例代码
完整的 EmptyStateComponent 示例代码如下：
<div *ngIf="showEmptyState"> <h3>没有数据</h3> </div>
-- -------------------- ---- -------
------ - ---------- ------ ------ - ---- ----------------
------ - -- - ---- -------
------ - ----------- ---- --------- - ---- -----------------
------------
--------- ------------------
------------ -------------------------------
---------- --------------------------------
--
------ ----- ------------------- ---------- ------ -
-------------- - ------
-------- ------
---------- -
----------------
---------- -- ------------------------ --- ---
------------------ -- ----------
----------------
--------------------- -- -
------------------- - --------
---
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ - --- --------------------
------------- -
-- -----
---------------------
-
------------ -
-- ----
-------------------------------------
-
------------- -
------ -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
--
-
--- -------------------- ---- -------
---- ------------------
------- --------------------------------------
---------------- -----------------------------------
----
--- ----------- ---- -- ------ - -------
-- --------- ----- -- -------- --
-----
-----
------总结
在 Angular 中，我们使用 RxJS 来进行数据的观察。通过添加 pipe 和多个操作符，我们可以处理各类不同的数据情况。在本文中，我们展示了如何在 Web 应用程序中优雅地显示空状态，以便让用户获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d61d6968c7c53b0c12297