Angular v16中如何获取URL参数？路由配置后参数返回undefined

问题场景 #

在Angular项目中配置嵌套路由后，尝试在InstanceNavigatorComponent中获取URL参数class和instance，但控制台输出undefined。

路由配置：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'expert',
    component: ExpertDialogComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: 'instances',
        pathMatch: 'full',
      },
      
      {
        path: 'instances',
        component: InstancesComponent,
        children: [
          {
            path: ':class',
            component: InstanceNavigatorComponent,
          },
          {
            path: ':class/:instance',
            component: InstanceNavigatorComponent,
          },
        ],
      },
    ],
  },
];

组件代码：

ngOnInit(): void {
    this.router.paramMap.subscribe((params) => { // router 是注入的 ActivatedRoute
      const classParam = params.get('class');
      const instanceParam = params.get('instance');
      console.log('Class parameter:', classParam);
      console.log('Instance parameter:', instanceParam);
    });
} 

解决方法 #

1. 修正ActivatedRoute注入与命名 #

确保组件正确注入ActivatedRoute，建议将变量名改为route避免与Router混淆：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      const classParam = params.get('class');
      const instanceParam = params.get('instance');
      console.log('Class parameter:', classParam);
      console.log('Instance parameter:', instanceParam);
    });
}

2. 处理组件复用导致的参数不更新 #

当从/instances/:class导航到/instances/:class/:instance时，Angular会复用同一组件实例，可能导致参数未更新。在路由配置中添加runGuardsAndResolvers: 'always'强制触发参数监听：

{
  path: 'instances',
  component: InstancesComponent,
  children: [
    {
      path: ':class',
      component: InstanceNavigatorComponent,
      runGuardsAndResolvers: 'always'
    },
    {
      path: ':class/:instance',
      component: InstanceNavigatorComponent,
      runGuardsAndResolvers: 'always'
    },
  ],
},

3. 避免使用JavaScript关键字作为参数名 #

class是JavaScript保留关键字，可能引发潜在冲突，建议修改参数名（例如改为className）：

修改路由配置：

{
  path: 'instances',
  component: InstancesComponent,
  children: [
    {
      path: ':className',
      component: InstanceNavigatorComponent,
    },
    {
      path: ':className/:instance',
      component: InstanceNavigatorComponent,
    },
  ],
},

修改组件参数获取逻辑：

this.route.paramMap.subscribe((params) => {
  const classParam = params.get('className');
  const instanceParam = params.get('instance');
  console.log('Class parameter:', classParam);
  console.log('Instance parameter:', instanceParam);
});

4. 验证路由匹配正确性 #

在组件中打印当前路由快照，确认URL是否匹配目标路由：

ngOnInit(): void {
    console.log('当前路由快照:', this.route.snapshot);
    this.route.paramMap.subscribe((params) => {
      // ... 参数获取逻辑
    });
}

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