Angular 带参数的角度2布线用作通配符布线

我有一个带有多个模块的angular应用程序，每个模块都定义了一些路线

应用程序（基本模块）使用此批准模块：

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 {
}

@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 {
}

用户模块路由器：

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 {
}

@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 {
}

交换模块路由器：

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 {
}

@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

用于按预期访问

交换选择组件

组件

但是当我导航到

http://localhost:4200/user/confirm/

并且意外地错过了添加所需参数

confirmcode

，而不是无效的路由错误，我得到了与上述相同的

ExchangeSelectionComponent

-路由的匹配。 当我试图打开

http://localhost:4200/thispagedoesnotexist

我使用

exchange name=thispagedoesnotexist

访问

ExchangedDetail组件

似乎
/exchange/
下面的所有内容都与基本根
/
匹配

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

我使用角5.2。提前感谢您的任何输入。
我猜ExchangeModule是在app.module中导入的，因此正在解析它的路由定义，而不是延迟加载的路由定义

path: '', component: ExchangeComponent

确保模块已懒散加载且未导入app.module中，这可以通过快速检查app.module文件或在访问应懒散加载的路由时检查网络选项卡并查找新加载的块来确认，如果未加载新块，则您的模块已导入app.module中，且未加载懒散的模块。
示例中的这一行不完整
{path:'exchange'，loadChildren:'app/exchange/exchange.module#
能否请您正确编写它，以便我们了解其中的内容。抱歉，修复了itnp，您是否以任何方式在app.module中导入了exchange模块？是的，我已经导入了。我首先将它们作为普通模块添加，然后更新为延迟加载。删除从AppModule导入的模块后t行为如预期。谢谢！这是个好消息，是的，我会写这个作为回答，谢谢！