在 Angular 应用中，我们经常需要在不同的组件之间传递数据。除了使用服务、共享模块等方法，URL 参数也是一种常用的传递数据的方式。本文将介绍如何在 Angular 中使用 URL 参数传递数据的技巧，包括获取参数、设置参数、动态更新参数等。
获取参数
在 Angular 中获取 URL 参数的方法很简单，我们可以使用 ActivatedRoute 服务。ActivatedRoute 是 Angular 中用于获取当前路由状态的服务，它包含了当前路由的信息，包括路由的参数、查询参数等。
下面是一个获取 URL 参数的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -------------------
--------- -
------ --------------
------ -- -- ------
-
--
------ ----- ----------- ---------- ------ -
--- -------
------------------- ------ --------------- --
---------- -
------- - ---------------------------------------
-
-在上面的代码中，我们注入了 ActivatedRoute 服务，并在 ngOnInit 生命周期钩子中使用了 route.snapshot.paramMap.get('id') 方法来获取 URL 参数中名为 id 的值。如果 URL 中没有参数 id，那么 this.id 的值将为 null。
设置参数
在 Angular 中设置 URL 参数的方法也很简单，我们可以使用 Router 服务。Router 是 Angular 中用于导航的服务，它可以让我们在不同的路由之间导航，并设置路由的参数、查询参数等。
下面是一个设置 URL 参数的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -------------------
--------- -
------ --------------
------- ------------------------------ -- ------------
-
--
------ ----- ----------- -
------------------- ------- ------- --
-------------- ------- -
---------------------------------- - -- ----
-
-在上面的代码中，我们注入了 Router 服务，并在 navigateTo 方法中使用了 this.router.navigate(['/my-route', { id }]) 方法来设置 URL 参数 id 的值为 123。这样，当用户点击按钮时，就会导航到 /my-route?id=123 的路由。
动态更新参数
在 Angular 中动态更新 URL 参数的方法也很简单，我们可以使用 ActivatedRoute 和 Router 服务的组合。具体来说，我们可以使用 ActivatedRoute 的 paramMap 属性来监听 URL 参数的变化，然后使用 Router 的 navigate 方法来动态更新 URL 参数。
下面是一个动态更新 URL 参数的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------ - ---- ------------------
------ - ------------ - ---- -------
------------
--------- -------------------
--------- -
------ --------------
------ -- -- ------
------- --------------------------- -----------
-
--
------ ----- ----------- ---------- ------ -
--- -------
--------------------- -------------
------------------- ------ --------------- ------- ------- ------- --
---------- -
------------------------- - -------------------------------------- -- -
------- - -------------------
---
-
------------- -
----------------------------------------
-
---------- -
----- ----- - ------
------------------------ - ------------ - --- ----- -- -------------------- ------- ---
-
-在上面的代码中，我们使用了 ActivatedRoute 的 paramMap 属性来监听 URL 参数的变化，并在 updateId 方法中使用了 this.router.navigate 方法来动态更新 URL 参数。具体来说，我们使用了 queryParams 属性来设置新的查询参数，然后使用 queryParamsHandling 属性来指定如何处理已有的查询参数。
总结
在 Angular 中使用 URL 参数传递数据是一种方便且常用的方式。本文介绍了如何获取 URL 参数、设置 URL 参数、以及动态更新 URL 参数。希望这些技巧能够帮助你更好地处理 Angular 应用中的数据传递问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6569462bd2f5e1655d1cefaa