在 Angular 应用中，当数据发生变化时，我们希望能够快速、准确地更新 UI。为了实现这个目标，我们可以使用 Observables。本文将介绍 Observables 的基础知识，并探讨如何使用 Observables 更新 Angular 中的 UI。
Observables 简介
在 Angular 中，我们通常使用 Observables 来处理异步数据流。Observable 是一个可以发出多个值的对象。这些值可以是原始数据类型、对象、数组等任何类型。与 Promises 相比，Observable 更加强大和灵活。
Observables 有三种基本状态：next、error 和 complete。当 Observable 发出一个值时，它会调用 next() 并传递该值。当 Observable 发生错误时，它会调用 error() 并传递错误对象。当 Observable 完成时，它会调用 complete()。
使用 Observables 更新 UI
在 Angular 中，我们可以使用 async pipe 实时地更新 UI。async pipe 可以订阅 Observable 并将 Observable 发出的任何新值推送到视图中。使用 async pipe 的好处是，它会自动取消订阅，避免可能的内存泄漏问题。下面是一个使用 async pipe 更新 UI 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------------
--------- ---------------
--------- -
---------- -- ------ - ----- -------
------- ----------------------------------------
-
--
------ ----- ----------- -
------ - --- ---------------------
------------- -
----------- - ---------------------------------------
-
----------- -
-- ---- ---- --- ----
--------------
-
-在上面的例子中，我们使用 async pipe 订阅了一个 Observable，并在视图中实时更新了一个计数器的值。请注意，我们不能通过直接增加计数器的值来更新 UI，因为这样做不会触发 Angular 的变更检测机制。
也可以手动订阅 Observable，并在更新 UI 后取消订阅。但需要注意，在手动订阅时，需要手动取消订阅，否则可能会导致内存泄漏。下面是一个手动订阅 Observable 更新 UI 的例子：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ----------- ------------ - ---- ----------
------------
--------- ---------------
--------- -
---------- -- ----- -------
------- ----------------------------------------
-
--
------ ----- ----------- ---------- --------- -
----- - --
------------- -------------
------------- -
----- ------- - ---------------------------------------
----------------- - ----------------------- -- -
---------- - ------
---
-
------------- -
--------------------------------
-
----------- -
-- ---- ---- --- ----
-------------
-
-在上面的例子中，我们手动订阅了一个 Observable，并在视图中更新了一个计数器的值。在组件销毁时，我们手动取消了订阅。请注意，我们不能通过直接增加计数器的值来更新 UI，因为这样做不会触发 Angular 的变更检测机制。
总结
在 Angular 中，使用 Observables 可以实现快速、准确地更新 UI。可以使用 async pipe 实时地更新 UI，也可以手动订阅 Observable 并在更新 UI 后取消订阅。需要注意的是，不能直接增加值来更新 UI，因为这样做不会触发 Angular 的变更检测机制。需要使用 Observables 发送新值以更新 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499229a48841e989461531d