Angular带参数路由异常：内容重复与跳转失效问题排查

问题1："Move"链接显示两次的原因及修复 #

访问http://localhost:4200/mahmud时，AppComponent被渲染了两次：一次是作为Angular应用的根组件，另一次是作为路由path: ':name'对应的组件被加载到根<router-outlet>中，两次渲染导致"Move"链接重复显示。

修复步骤： #

1. 创建专门的父组件（示例命名为ParentComponent）承载子路由：

ng generate component parent

2. 修改ParentComponent的模板文件parent.component.html，仅保留子路由出口：

<router-outlet></router-outlet>

3. 更新路由配置，将:name路径对应的组件替换为ParentComponent：

const routes: Routes = [
  {
    path: ':name', 
    component: ParentComponent, // 替换为新父组件
    children: [
      { path: '1', component: Child1Component },
      { path: '2', component: Child2Component },
    ]
  },
  { path: '**', redirectTo: '/mur', pathMatch: 'full' }
];

4. 保留AppComponent模板的原有结构，此时根组件仅渲染一次"Move"链接：

<router-outlet></router-outlet>
<a href="#" (click)="goto()">Move</a>

问题2：点击"Move"无法跳转到/mahmud/1的原因及修复 #

原goto()方法中this.router.navigate(["1"])是尝试跳转到绝对路径/1，该路径不存在触发了通配符路由的重定向，需改为基于当前路由的导航逻辑。

修复步骤： #

在AppComponent中注入ActivatedRoute和Router，修改goto()方法：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  goto() {
    // 获取当前路由的name参数，拼接路径跳转
    const currentName = this.route.snapshot.firstChild?.paramMap.get('name');
    if (currentName) {
      this.router.navigate([currentName, '1']);
    }
  }
}

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