角路由参数不可访问

Question

编辑：（解决方案）

我的问题的根本原因是，在app.component中以编程方式添加了其他路由。我通过禁用app-routing.module中的所有路由并仍然能够神秘地导航到所讨论的路由来发现这一点。删除以编程方式添加的路由后，一切都按预期工作。感谢大家的帮助！ ：-）

原始（问题）：

我正在组件中使用以下代码来订阅路由参数：

this.activatedRoute.params.subscribe((values) => {
  console.log('these are my parameters: ', values);
});

一切正常，我可以毫无问题地获得路线参数。

这是路由的工作配置：

{
  path: 'details/:itemId',
  component: ItemDetailsComponent,
},

出现问题了： 当我尝试简化路由时（由于我不需要任何其他路由），出现以下问题：对路由配置进行以下简单更改后，我无法再访问路由参数（它们为空）。

这是路由的有缺陷的配置：

{
  path: ':itemId',
  component: ItemDetailsComponent,
},

有人知道吗，为什么我在缩短路线后不能再访问单个路线参数？

Answer 1

似乎您本应该仅details/:itemId进行操作时仍在尝试导航到:itemId。确保您导航到正确的路径。

完成更改后，/details将起作用，并被视为itemId。但是/details/1或任何此类路径都会导致错误。

  

这是您推荐的Working Sample StackBlitz。

Answer 2

工作正常。请参阅堆栈闪电战：https://stackblitz.com/edit/angular-nqzpum

Answer 3

在这种情况下，您实际上不需要在router.module中指定如下所示的变量：

{
  path: '',
  component: ItemDetailsComponent,
},

然后，如果您需要特别打开一个项目，请使用

this.router.navigate(["", {itemId: 123}]);

提供了将路由器注入为路由器的地方。

然后您需要在ItemDetailsComponent中注入 activatedRoute：ActivatedRoute

this.activatedRoute.params.subscribe(
  (params) => {
    //ItemId will be available here when url changes
    console.log(params.itemId);
  }
);