Angular 17：懒加载独立组件时无法获取路由参数的问题

独立组件完全支持路由参数传递，你遇到的问题是获取参数的方式错误，以下是修正方案：

问题原因 #

paramMap 返回的是 Angular 封装的 ParamMap 对象，并非普通键值对对象，不能直接通过 .folder 属性访问参数值，必须使用 get() 方法获取对应参数。

修正后的组件代码 #

1. 先确保导入必要的依赖：

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

2. 修改 ngOnInit 中的参数获取逻辑：

ngOnInit(): void {
  this.route.paramMap.subscribe((params: ParamMap) => {
    this.folder = params.get('folder');
    console.log("value params folder:", this.folder);
  });
}

如果不需要监听参数变化（比如无路由复用场景），也可以用快照方式一次性获取：

ngOnInit(): void {
  this.folder = this.route.snapshot.paramMap.get('folder');
  console.log("value params folder:", this.folder);
}

额外说明 #

• 懒加载独立组件的路由参数传递逻辑和常规组件完全一致，区别仅在于独立组件无需在 NgModule 中声明，路由配置使用 loadComponent 而非 component 字段。
• 你的路由配置和模板中的 routerLink 写法是正确的，无需修改。

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