前言

在 Angular 应用中，路由是非常重要的一环，它决定了用户在应用中的导航行为。在某些情况下，我们需要对路由进行监视，以便进行一些额外的操作，比如记录用户的访问行为、处理路由变化等。本文将介绍如何使用 RxJS 监视 Angular 路由，让我们开始吧！

RxJS 简介

RxJS 是 ReactiveX 框架的 JavaScript 实现，它提供了一套强大的工具，用于处理异步数据流。RxJS 中最重要的概念是 Observable，它用于表示一个异步数据流，可以被订阅并接收数据。除了 Observable，RxJS 还提供了一些操作符，用于对数据流进行转换、过滤等操作。RxJS 是 Angular 的核心依赖之一，它被广泛应用于 Angular 应用中。

监视路由变化

在 Angular 应用中，我们可以使用 Router 服务来管理路由。Router 服务提供了一个名为 events 的 Observable，用于监听路由事件。我们可以使用 RxJS 操作符来对这个 Observable 进行处理，以便进行一些额外的操作。

下面是一个简单的示例，演示如何使用 RxJS 监视路由变化：

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- ------------- - ---- ------------------
------ - ------ - ---- -----------------

------------
  --------- -----------
  --------- ---------------------------------
--
------ ----- ------------ -
  ------------------- ------- ------- -
    ------------------------
      ------------ -- ----- ---------- --------------
    ----------------- -- -
      -------------------- -------
    ---
  -
-

在这个示例中，我们创建了一个 AppComponent 组件，它包含了一个 <router-outlet> 元素，用于显示当前路由对应的组件。在 AppComponent 的构造函数中，我们订阅了 Router 服务的 events Observable，并使用 filter 操作符过滤出 NavigationEnd 事件。当路由变化时，我们会收到一个 NavigationEnd 事件，并将其打印到控制台中。

监视路由参数变化

在某些情况下，我们需要监视路由参数的变化。比如，在一个搜索页面中，我们需要根据用户输入的关键字实时更新搜索结果。为了实现这个功能，我们可以使用 ActivatedRoute 服务来获取路由参数，并使用 RxJS 监视参数变化。

下面是一个简单的示例，演示如何使用 RxJS 监视路由参数变化：

-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------ - --- - ---- -----------------

------------
  --------- -------------
  --------- -
    ----------- ------- -------
    ----
      --- ----------- ------ -- ----------- ------ -------
    -----
  -
--
------ ----- --------------- ---------- ------ -
  -------- -------
  -------- ---------

  ------------------- ------ --------------- --

  ---------- -
    ------------------------------
      ---------- -- ----------------------
    ------------------- -- -
      ------------ - --------
      ---------------------
    ---
  -

  --------------- ------- -
    -- ---------
    ------------ - ------- ------ -------
  -
-

在这个示例中，我们创建了一个 SearchComponent 组件，它包含了一个

65764dbfd2f5e1655df8bcb7