Angular 8动态路由问题：无法获取参数及默认路由设置

一、获取父路由的id参数 #

你遇到参数无法获取的核心原因是：this.activateRoute.params只能获取当前路由配置中定义的参数，而id是在主路由的company/:id（父路由）里定义的，并非当前懒加载子路由的参数。

你可以通过以下两种方式正确获取id：

方法1：访问父路由的参数 #

直接订阅父路由的params对象：

this.activatedRoute.parent?.params.subscribe(param => {
  console.log(param.id); // 这里就能拿到父路由的id了
});

方法2：使用paramMap（Angular官方推荐方式） #

paramMap能更安全地处理参数，结合父路由的paramMap使用：

this.activatedRoute.parent?.paramMap.subscribe(paramMap => {
  const id = paramMap.get('id');
  console.log(id);
});

如果你的组件路由层级更深，也可以通过activatedRoute.root遍历所有路由节点，但大部分场景下直接访问parent就足够解决问题。

二、设置默认路由为activity #

要实现访问company/:id时自动跳转到company/:id/activity，只需要调整懒加载模块的路由配置即可：

修改你的懒加载路由文件，将默认重定向目标从view改为activity，同时加上pathMatch: 'full'确保匹配逻辑正确：

const routes: Routes = [
  { path: '', component: CompanyViewComponent, children: [
      // 把默认重定向目标改为activity，并添加pathMatch: full
      { path: '', redirectTo: 'activity', pathMatch: 'full' },
      { path: 'activity', component: CompanyActivityComponent, data: { title: "Company Activity" } },
      // 若有其他子路由如contacts，可继续在此添加
      { path: 'contacts', component: CompanyContactsComponent, data: { title: "Company Contacts" } }
    ] }
];

这样配置后，当用户访问company/123这类路径时，路由会自动重定向到company/123/activity，同时你也能通过上面的方法正确获取到id=123的参数。

内容的提问来源于stack exchange，提问作者Cz Test