Question

Hei，我目前正在研究一个有角度的应用程序，并且在路由器中面临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

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。只要您在auth方法中使用的路径中输入路径forRoot，用于加载子系统的路径就会以预提交的形式添加到它们中。

要达到你想要的效果，你需要定义以下路线：

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，您需要以下路径：

根/ AUTH（AUTH：登录）

这是因为组件将由指定的插座呈现。有关详细信息，请仔细查看文档。

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

app.router

authentication.router

我当前的设置

1 个答案: