使用 forChild 时 Angular 无法访问子路由

Question

嘿，我目前正在开发一个 Angular 应用程序，并且在路由器中遇到了 loadChildren 的问题。我之前发布了一个类似问题的问题，但现在我已经运行了所有可能的测试，并将每个模块的路由部分移动到单独的模块中。我可以到达顶级路线，例如auth，但不能到达它的任何子路线，例如auth/login。我的路由模块如下：

app.router

export const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/main/main.module#MainModule',
    canActivate: [OauthGuard]
  }, {
    path: 'auth',
    loadChildren: 'app/authentication/authentication.module#AuthenticationModule',
  }, {
   path: '**',
   component: PageNotFoundComponent,
   pathMatch: 'full'
   }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, {enableTracing: true}) ],
  exports: [ RouterModule ]
})
export class AppRouterModule {}

authentication.router

export const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class AuthenticationRouterModule {}

当尝试导航到auth/login 时，我每次都会得到PageNotFoundComponent。我启用了跟踪路由，但路径无法识别，所以我记录了注册的路由，得到以下输出：

Routes:  [
  {
    "path": "",
    "outlet": "app",
    "pathMatch": "full",
    "canActivate": [
      null
    ]
  },
  {
    "path": "auth",
    "loadChildren": "app/authentication/authentication.module#AuthenticationModule"
  },
  {
    "path": "**",
    "outlet": "app"
  }
]

所以我的路线永远不会被注册，即使在不同的模块上仔细使用forRoot 和forChild。我已经阅读了几乎所有我能找到的关于该主题的内容，但最后指向使用我已经拥有的代码。我发布我的 ng 版本以防此版本存在错误或问题。

我目前的设置

• @angular/cli: 1.1.1
• 节点：6.10.3
• 操作系统：win32 x64
• @angular/动画：4.1.3
• @angular/common: 4.1.3
• @angular/编译器：4.1.3
• @angular/core: 4.1.3
• @angular/forms: 4.1.3
• @angular/http: 4.1.3
• @angular/material: 2.0.0-beta.6
• @angular/platform-b​​rowser: 4.1.3
• @angular/platform-b​​rowser-dynamic: 4.1.3
• @angular/platform-server: 4.1.3
• @angular/路由器：4.1.3
• @angular/cli: 1.1.1
• @angular/compiler-cli: 4.1.3
• @ngtools/json-schema: 1.1.0
• @ngtools/webpack: 1.4.1

有人遇到过类似的问题，或者知道怎么解决吗？

Answer 1

通过定义：

export const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'auth/login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class AuthenticationRouterModule {}

要渲染LoginComponent，您必须导航到root/auth/auth/login。只要您在forRoot 方法中使用的路由中输入路径auth，用于加载孩子的路径将作为前缀添加到它们。

要实现你想要的，你需要定义以下路由：

export const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class AuthenticationRouterModule {}

编辑：

查看 named outlets 的文档后，要导航到 LoginComponent，您需要以下路径：

root/auth(auth:login)

这是因为组件将由命名的插座呈现。如需更多信息，请仔细查看文档。