angular - 使用延迟加载以 Angular 获取路由参数

Question

我会在 Angular 5 中从我的路由路径中检索一个参数

http://localhost:4200/#/dashboard/74618/LastCC

我会得到 74618来自 id 的路线范围。

我是这样处理的

constructor(public activatedRoute: ActivatedRoute)


this.activatedRoute.paramMap.subscribe(params => {
  console.log("params******");
  params.get("id");
});

我得到 undefined作为值(value)。

当我在这条路径上时它正在工作 http://localhost:4200/#/dashboard/74618/ (没有 \LastCC )

LastCC 是延迟加载的，这是路由器配置:

const routes: Routes = [
  {
    path: "",
    component: CreditPointComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CreditPointRoutingModule {}

id 参数位于父模块路由器配置(仪表板模块)上。

const routes: Routes = [
  {
    path: ":id",
    component: DashboardComponent,
    children: [
      {
        path: "LastCC",
        loadChildren:
          "app/useful-documents/credit-point/credit-point.module#CreditPointModule"
      }
    ]
  }
];

Answer 1

您没有在 LastCC 上配置参数路线。尝试这样的事情:

  {
    path: ":id",
    component: DashboardComponent
  },
  {
     path: ":id/LastCC",
     loadChildren:
          "app/useful-documents/credit-point/credit-point.module#CreditPointModule"
   }

请注意，LastCC 路由的路径现在有一个路由参数: path: ":id/LastCC"
另请注意，LastCC 路由不再是子路由。有必要吗？

如果它确实需要是子路由，那么您可能需要保留路由配置并从父路由而不是 LastCC 中读取参数。路线。

this.activatedRoute.parent.paramMap.subscribe(params => {
  console.log("params******");
  console.log(params.get("id"));
});

注意 .parent在 activatedRoute 之后.