使用activatedRoute.params.subscribe无法获取URL参数，订阅不触发

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

• 确认路由参数配置与URL匹配
  确保你的路由路径正确定义了:name参数（比如path: 'recipes/:name'），且当前访问的URL格式为/recipes/具体名称，而非/recipes?name=具体名称（后者属于查询参数，需要用queryParams订阅）。

• 改用推荐的paramMap订阅方式
  Angular官方更推荐使用paramMap替代params，类型更安全，也能避免一些隐性问题：

  ngOnInit(): void {
    this.activeRoute.paramMap.subscribe((paramMap) => {
      const name = paramMap.get('name');
      if (name) {
        this.recipe = this.recipeService.getRecipes().find(ele => ele.name === name);
      }
      console.log(' ---- recipe ---- ', this.recipe);
    });
  }
  

• 检查组件复用场景的路由配置
  如果是在同一组件间切换不同参数（比如从/recipes/apple到/recipes/banana），Angular默认不会重新初始化组件，可在路由配置中添加runGuardsAndResolvers: 'always'确保参数变化能被捕获：

  {
    path: 'recipes/:name',
    component: YourRecipeComponent,
    runGuardsAndResolvers: 'always'
  }
  

• 通过Router事件监听路由变化
  若上述方法无效，可直接监听路由导航结束事件，再通过快照获取参数：

  import { Router, NavigationEnd } from '@angular/router';
  import { filter } from 'rxjs/operators';
  
  constructor(private activeRoute: ActivatedRoute, private router: Router) {}
  
  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const name = this.activeRoute.snapshot.paramMap.get('name');
      if (name) {
        this.recipe = this.recipeService.getRecipes().find(ele => ele.name === name);
      }
      console.log(' ---- recipe ---- ', this.recipe);
    });
  }
  

• 确认ActivatedRoute注入正确
  确保组件构造函数中正确注入了ActivatedRoute，没有拼写错误或依赖注入问题：

  constructor(private activeRoute: ActivatedRoute) {}
  

内容的提问来源于stack exchange，提问作者Yajuvendra Singh thakur