Angular配置char/:id路由后获取路由参数返回空如何解决

安全阿岳

2026-9-27

问题原因

你遇到的空参数问题核心是混用了Angular根组件和路由组件的职责：
Angular默认会在main.ts中直接启动AppComponent实例挂载到index.html的根节点上，这个实例对应的是最顶层的根路由，而你没有给根路由配置参数，所以不管怎么读取ActivatedRoute拿到的都是空值。
你在路由里配置的char/:id对应AppComponent是路由模块要渲染的独立实例，只要你的AppComponent没有添加<router-outlet>标签，这个路由实例根本不会被渲染，自然拿不到参数。

修复方案

特殊场景方案（必须在AppComponent中读参数）

如果业务要求必须在根组件读取路由参数，可以遍历子路由层级获取参数，示例代码如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, Params } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'Character Search';
  routeParams: Params;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 遍历所有子路由层级拿参数
        let child = this.activatedRoute.firstChild;
        while (child) {
          this.routeParams = child.snapshot.params;
          console.log('路由参数：', this.routeParams);
          child = child.firstChild;
        }
      }
    })
  }
}