Angular 是一种流行的前端框架，用于构建交互式，高性能的 Web 应用程序。在 Angular 中，路由是一个重要的组成部分，它帮助我们实现单页应用程序（SPA）的导航和跳转。在本文中，我们将讨论如何在 Angular 中获取当前路由状态。
路由状态
在 Angular 中，我们可以通过路由来指定应用程序显示的不同视图。路由是一个 URL 的映射，与 URL 中的路径段相关联。每个视图都有自己的组件，当前路由状态指的是当前正在显示的视图和关联的 URL。
在大多数情况下，我们需要获取当前路由状态以进行某些操作，例如更改当前视图的标题、呈现不同的导航等。现在，我们将探讨如何在 Angular 中获取当前路由状态。
ActivatedRoute
Angular 提供了 ActivatedRoute 服务，用于获取当前激活路由的信息。ActivatedRoute 服务是一个包含路由参数、数据和解析数据的简单对象。我们可以注入 ActivatedRoute 服务并使用它来获得当前路由状态。
注入 ActivatedRoute
要使用 ActivatedRoute 服务，我们需要在我们的组件中注入它。在下面的示例中，我们将注入 ActivatedRoute：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
------------
--------- -------------------
--------- -----
--
------ ----- ----------- -
------------------- ------ --------------- -
-- ---
-
-在上面的代码中，我们使用构造函数注入了 ActivatedRoute 服务，现在我们可以使用它来获取当前路由状态。
获取当前路由状态
获取当前路由状态非常容易，我们可以使用 ActivatedRoute 对象的 snapshot 属性来获取。Snapshot 属性是一个路由状态快照，其中包含当前路由的信息。
在下面的示例中，我们将获取当前路由的路径：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
------------
--------- -------------------
--------- -----
--
------ ----- ----------- -
------------------- ------ --------------- -
----- --- - ----------------------------------
-------------------- ------ -----
-
-在上面的示例中，我们将通过 ActivatedRoute 对象的 snapshot.url 属性获取当前路由的 URL，然后使用 join() 方法将其转换为字符串。
除了当前路由的 URL，我们还可以获取当前路由的数据和参数。在下面的示例中，我们将获取当前路由的数据和参数：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
------------
--------- -------------------
--------- -----
--
------ ----- ----------- -
------------------- ------ --------------- -
----- ---- - -------------------------
----- ------ - ---------------------------
-------------------- ------- ------
-------------------- --------- --------
-
-在上面的示例中，我们将通过 ActivatedRoute 对象的 snapshot.data 和 snapshot.params 属性获取当前路由的数据和参数。这些属性分别返回包含当前路由数据和参数的对象。
监听路由变化
如果我们希望实时更新当前路由状态，我们可以订阅路由参数的变化。在下面的示例中，我们将订阅 ActivatedRoute 对象的 paramMap 属性：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
------------
--------- -------------------
--------- -----
--
------ ----- ----------- ---------- ------ -
------------------- ------ --------------- -
-- ---
-
----------- ---- -
------------------------------------ -- -
----- -- - -----------------
-------------------- ----- ----
---
-
-在上面的示例中，我们将使用 paramMap 属性订阅路由参数的变化，然后使用 get() 方法获取路由参数的值。
结论
在本文中，我们讨论了如何在 Angular 中获取当前路由状态。我们看到了如何注入 ActivatedRoute 服务并使用它获取当前路由的 URL、数据和参数。我们还讨论了如何订阅路由参数的变化并随时更新当前路由状态。
获取当前路由状态对于构建交互式、高性能的 Angular 应用程序非常重要。我们希望本文对你理解和使用当前路由状态有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3b537f40ec5a964e470fe