Angular 5路由仅匹配单个路由问题求助

这个问题的核心是Angular路由的「从上到下、先匹配优先」规则，再加上你的路由配置出现了意外的全局混入，导致/login、/register等路径被错误匹配到了EventsModule的:id动态路由上。

为什么会出现这个问题？ #

正常情况下，你通过loadChildren懒加载EventsModule，它的路由应该是挂载在/events路径下的子路由——也就是说，只有/events、/events/new、/events/:id这类路径才会触发EventsModule里的组件。但现在所有非根路径都加载EventDetailsComponent，说明:id路由意外变成了根路由下的规则，它会匹配任何非空字符串（比如login、register都会被当成id参数）。

最可能的两个原因：

1. EventsModule被直接导入到了AppModule中
   如果你的AppModule的imports数组里，除了通过RouterModule.forRoot()的懒加载路由引用EventsModule外，还直接加了EventsModule，那它的forChild路由就会被合并到根路由空间里，而不是限定在/events下。此时path: ':id'就变成了/:id，会优先匹配所有非空路径（如果它的匹配顺序在login、register之前）。

2. EventsModule错误使用了RouterModule.forRoot()
forRoot()是专门给AppModule用的根路由配置方法，只能调用一次。如果EventsModule里用了forRoot(routes)而不是forChild(routes)，当它被懒加载时，会直接修改根路由配置，把:id路由混入根路由规则中。

怎么解决？ #

按以下步骤排查修复：

• 检查AppModule的imports
  打开AppModule，确保imports数组里没有直接写EventsModule，只保留RouterModule.forRoot(routes)这一处对它的引用。比如：

  // 正确的AppModule imports示例
  @NgModule({
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes) // 只有这里通过懒加载引用EventsModule
      // 不要在这里写EventsModule！
    ],
    // ...其他配置
  })
  export class AppModule { }
  

• 确认EventsModule的路由配置
  检查EventsModule，确保它用的是RouterModule.forChild()来配置路由，而不是forRoot()：

  // 正确的EventsModule路由配置
  const routes: Routes = [ 
    { path: '', component: EventSearchResultsComponent, }, 
    { path: 'new', component: NewEventComponent, }, 
    { path: ':id', component: EventDetailsComponent } 
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)], // 必须是forChild
    exports: [RouterModule],
    declarations: [/* 组件声明 */]
  })
  export class EventsModule { }
  

• 验证路由配置（可选）
  你可以在浏览器控制台里查看当前的路由树，确认:id是否只存在于/events路径下。方法是：在某个组件中注入Router服务，然后把它暴露到window对象（比如window.router = this.router;），之后在控制台输入router.config，就能看到完整的路由规则列表，检查是否有多余的/:id规则。

完成以上步骤后，你的路由应该就能正常工作了：/login会加载LoginModule，/events/:id才会加载EventDetailsComponent。

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