Question

我有一个带有多个模块的角度应用程序，每个模块定义一些路径。

App（基本模块）使用此AppRoutingModule：

const routes: Routes = [
  {path: 'user', loadChildren: 'app/user/user.module#UserModule'},
  {path: 'exchange', loadChildren: 'app/exchange/exchange.module#ExchangeModule'},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch: 'full'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

用户模块路由器：

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: UserComponent,
      children: [
        {path: '', component: UserProfileComponent, canActivate: [AuthGuardService]},
        {path: 'login', component: UserLoginComponent},
        {path: 'register', component: UserRegisterComponent},
        {path: 'confirm/:confirmcode', component: UserConfirmMailComponent},
        {path: 'logout', component: UserLogoutComponent}
      ]
    }]
  )],
  exports: [RouterModule]
})
export class UserRoutingModule {
}

Exchange模块路由器：

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: ExchangeComponent,
      children: [
        {path: '', component: ExchangeListComponent},
        {path: ':exchange-name', component: ExchangeDetailComponent},
        {path: ':exchange-name/:baseCode', component: ExchangeSelectionComponent},
        {path: ':exchange-name/:baseCode/:targetCode', component: ExchangePairComponent},
      ]
    }]
  )],
  exports: [RouterModule]
})
export class ExchangeRoutingModule {
}

我现在可以使用路由http://localhost:4200/exchange/Sample/Base按预期访问ExchangeSelectionComponent组件。

但是，当我导航到http://localhost:4200/user/confirm/并意外错过了添加所需参数confirmcode时，而不是Invalid-Route-Error，我得到了与上述相同ExchangeSelectionComponent - 路线的匹配。此外，当我尝试打开http://localhost:4200/thispagedoesnotexist时，我会使用ExchangeDetailComponent转到exchange-name = thispagedoesnotexist。

/exchange/以下的所有内容似乎也与基础根/匹配。

为什么会这样，我该如何避免这种行为？我认为在routeChildren内的路由中定义的每个路由只会在访问相应的父路由时被延迟加载，直到那时甚至没有被触及。

我使用Angular 5.2。提前感谢任何意见。

Answer 1

我猜测ExchangeModule是在app.module中导入的，因此它的路由定义正在被解析而不是延迟加载的。

path: '', component: ExchangeComponent

确保模块是延迟加载而不是在app.module中导入，这可以通过快速检查app.module文件或检查网络选项卡并在访问应该访问的路径时查找新加载的块来确认。 lazyloaded，如果没有加载新的块，那么你的模块已经在app.module中导入，并且没有加载。

带参数的Angular 2路由充当通配符路由

1 个答案: