在 Angular 应用中，我们经常需要从路由中获取参数来进行相应的操作。但有时候我们会发现，在某些组件中无法获取路由参数，这时候该怎么办呢？本文将介绍如何解决 Angular 组件中无法获取路由参数的问题，让你的应用更加完善。
问题分析
首先，我们需要了解为什么有些组件无法获取路由参数。这是因为在 Angular 中，路由参数是由 ActivatedRoute 服务提供的，而这个服务只能在路由组件中使用。如果在非路由组件中使用 ActivatedRoute，就会出现无法获取路由参数的情况。
解决方法
有了问题的分析，我们就可以开始解决这个问题了。解决方法有两种：一种是通过将路由参数传递给子组件，另一种是通过 Router 服务来获取路由参数。
通过将路由参数传递给子组件
如果你的组件是一个子组件，那么你可以通过将路由参数传递给子组件来解决这个问题。具体做法是在父组件中获取路由参数，然后将参数传递给子组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -------------
--------- -
---------- --------------
---------- ----------------------------
--
--
------ ----- --------------- -
------ -------
------------------- ------ --------------- -
-------------------------------------- -- -
---------- - --------------------
---
-
-在这个例子中，我们通过 ActivatedRoute 服务获取路由参数，并将参数传递给了 app-child 组件。在子组件中，我们可以通过 @Input 装饰器来接收父组件传递过来的参数：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- -
--------- --------------
--------- -- ----- ------
--
--
------ ----- -------------- -
-------- ------ -------
-通过 Router 服务获取路由参数
如果你的组件不是一个子组件，那么你可以通过 Router 服务来获取路由参数。具体做法是在组件中注入 Router 服务，然后通过 Router 服务的 url 属性获取当前路由的 URL，并从 URL 中解析出路由参数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -------------------
--------- -
------ --------------
--------- -- ----- ------
--
--
------ ----- ----------- -
------ -------
------------------- ------- ------- -
----- --- - ----------------
----- ----- - ---------------
---------- - ------------------ - ---
-
-在这个例子中，我们通过 Router 服务的 url 属性获取当前路由的 URL，并从 URL 中解析出路由参数。注意，这种方法只适用于路由参数是 URL 的一部分的情况。
总结
无法获取路由参数是一个比较常见的问题，但也是比较容易解决的。通过本文介绍的两种方法，你可以轻松地解决 Angular 组件中无法获取路由参数的问题。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65891cbaeb4cecbf2de50d62