Angular 18子组件注入Router后路由点击失效问题排查

核心问题根源 #

你在StaffDetailComponent的@Component装饰器的providers数组中手动声明了Router：

@Component({
   providers: [Router], // 这行是导致路由异常的根本原因
})

Angular的Router是全局单例服务，由provideRouter在根注入器中注册，整个应用应该共享同一个实例。组件自身的providers数组中声明Router，会强制创建一个独立的Router实例，这个实例和全局路由系统完全脱节，导致所有导航操作失效，出现你看到的"点击链接不跳转但地址显示正常"的卡顿现象。

针对疑问的解答 #

1. 是否遗漏了provideRouter的核心概念？ #

是的，这里忽略了Angular依赖注入中单例服务的关键逻辑：

• provideRouter会在根注入器中注册Router的单例实例，全应用共享。
• 组件的providers数组用于声明组件级别的服务实例，如果你在这里声明Router，会覆盖根注入器的全局实例，导致组件使用的Router无法和全局路由系统通信。

2. 多层嵌套router-outlet是否是问题根源？ #

你的路由设计完全正确，多层嵌套router-outlet是Angular实现嵌套路由的标准方式，和路由卡顿没有任何关系。问题完全来自于错误的Router服务声明。

3. 路由跳转方式是否正确？ #

两种方式都可行，取决于你的需求：

• 绝对路径跳转：this.router.navigate(['staff/list']) 是正确的，无论当前处于哪个路由，都会跳转到/staff/list。
• 相对路径跳转：如果想基于当前路由（比如/staff/view/1）跳转，可以注入ActivatedRoute，使用相对路径：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private router: Router, private route: ActivatedRoute) {}
  
  doStuff(): void {
    this.router.navigate(['../list'], { relativeTo: this.route });
  }
  

但前提是：必须移除StaffDetailComponent的providers数组中的Router声明，确保注入的是全局的Router单例实例。

修复步骤 #

1. 删除StaffDetailComponent的@Component装饰器中providers数组里的Router；
2. 正常通过构造函数注入Router或使用inject(Router)获取实例：

   import { Router } from '@angular/router';
   
   @Component({
     // 移除providers中的Router
   })
   export class StaffDetailComponent {
     private router = inject(Router);
     // 或构造函数注入：constructor(private router: Router) {}
   
     doStuff(): void {
       this.router.navigate(['staff/list']); // 现在可以正常跳转
     }
   }
   

内容的提问来源于stack exchange，提问作者Jimmy Chi Kin Chau