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

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 版本以防它是这个版本的错误或问题。

My current setup

@angular/cli: 1.1.1

node: 6.10.3

os: win32 x64

@angular/animations: 4.1.3

@angular/common: 4.1.3

@angular/compiler: 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-browser: 4.1.3

@angular/platform-browser-dynamic: 4.1.3

@angular/platform-server: 4.1.3

@angular/router: 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，用于加载子项的路径将作为 prefix 添加到它们中。

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

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)

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

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

Angular can't access child routes when using forChild

angular-routing

angular-module

angular

app.router

authentication.router

My current setup