Angular路由问题：路径参数URL无法匹配且参数获取失败

核心问题分析 #

你的问题集中在路由组件配置错误和路由匹配逻辑冲突两点：

1. 错误将根组件AppComponent设为路由组件：AppComponent作为应用根组件，本身包含<router-outlet>用于渲染路由子组件，直接把它绑定到:city路径会导致路由渲染逻辑混乱，触发路由不匹配错误和重定向。
2. 路由参数获取依赖错误上下文：因为路由规则根本没被正确匹配，所以ActivatedRoute.snapshot.paramMap自然无法获取到参数值。

分步解决方案 #

1. 创建专用城市页面组件 #

先生成一个用于处理城市参数的子组件（比如CityComponent），替代AppComponent作为路由载体：

ng generate component city

2. 修正路由配置 #

修改路由数组，将:city路径指向新建的CityComponent，同时可添加默认路由处理根路径访问：

const routes: Routes = [
  {
    path: ':city',
    component: CityComponent, // 替换为子组件
  },
  {
    path: '',
    redirectTo: 'default-city', // 可选：根路径重定向到默认城市
    pathMatch: 'full'
  }
];

确保AppComponent模板中保留<router-outlet>标签，这是路由渲染的核心入口：

<!-- app.component.html -->
<router-outlet></router-outlet>

3. 正确获取路由参数 #

在CityComponent中实现参数获取，同时支持初始快照和路由参数变化监听（适配同一组件内参数更新场景）：

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

@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent implements OnInit {
  reqCity: string | null = null;

  constructor(private _ActivatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    // 快照获取初始参数
    this.reqCity = this._ActivatedRoute.snapshot.paramMap.get('city');
    console.log('reqCity:', this.reqCity);

    // 监听路由参数变化（可选，用于同一组件内参数更新）
    this._ActivatedRoute.paramMap.subscribe(params => {
      this.reqCity = params.get('city');
      console.log('Updated reqCity:', this.reqCity);
    });
  }
}

4. 模板中正确展示参数 #

在CityComponent模板中直接绑定参数：

<!-- city.component.html -->
reqCity={{ reqCity }}

额外注意事项 #

• 确认路由模块（通常是AppRoutingModule）已通过RouterModule.forRoot(routes)导入到AppModule中。
• 确保index.html中的<base href="/">配置正确，这是路由路径解析的基础。
• 开发环境下Angular CLI的dev server已处理SPA路由刷新问题，生产部署时需配置服务器（如Nginx的try_files规则）避免404。

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