Angular问题：使用ActivatedRoute获取URL参数返回null

以下是几个常见的排查和解决方向：

1. 确认路由配置已正确注册 #

确保你的路由数组已经通过RouterModule.forRoot()（根模块）或RouterModule.forChild()（特性模块）注册，并且对应的模块已经被导入到应用的NgModule中。

示例（根路由配置）：

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

2. 检查路由层级配置是否正确 #

如果question/edit/:id是某个父路由的子路由，必须通过children属性嵌套配置，不能直接写完整路径。错误的平级配置会导致路由匹配异常，无法获取参数。

正确的嵌套路由示例：

const routes: Routes = [
  {
    path: 'question',
    children: [
      { path: 'edit/:id', component: AddQuestionComponent }
    ]
  }
];

3. 改用订阅方式获取参数（适配组件复用场景） #

当组件被Angular路由复用策略复用后，snapshot只能获取初始加载的参数，后续参数变化无法触发更新。此时需要订阅paramMap的变化来获取最新值：

ngOnInit() {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    const id = Number(paramMap.get('id'));
    console.log(id); // 此时可正确获取到2
  });
}

4. 确认ActivatedRoute实例对应正确路由 #

如果组件是通过嵌套路由加载的，当前注入的ActivatedRoute可能是父路由的实例，需要通过firstChild访问子路由的参数：

ngOnInit() {
  const id = Number(this.activatedRoute.firstChild?.paramMap.get('id'));
  console.log(id);
}

或者遍历路由树查找目标参数：

ngOnInit() {
  let currentRoute = this.activatedRoute.root;
  while (currentRoute) {
    if (currentRoute.paramMap.get('id')) {
      const id = Number(currentRoute.paramMap.get('id'));
      console.log(id);
      break;
    }
    currentRoute = currentRoute.firstChild;
  }
}

5. 验证URL与路由配置的匹配性 #

确保浏览器地址栏的URL完全匹配question/edit/:id格式，没有多余的路径片段或错误的拼写。比如http://localhost:4200/question/edit/2/extra这类不符合路由规则的URL，会导致路由不匹配，参数返回null。

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