Angular2路线

我目前正在从事Angular 2项目，尽管所有与concernig routes相关的工作似乎都相对良好，但我并不完全满意我是如何完成这项工作的

下面的图表与我在应用程序中使用的结构非常匹配：

所以，这个应用程序有两个部分。根据他们的行为，他们可能要求用户通过身份验证或未通过身份验证才能联系到他们。访问其中一个会阻止访问另一个

• 未经认证的页面（图上涂成红色）都具有相同的设计；除了它们的形式和动作，它们看起来都差不多。因此，我创建了一个模板，并添加了一个
  来注入所需的部分
• 经过身份验证的页面都共享相同的结构：一个导航栏和一个
  来注入它们的内容；因此，它们都共享相同的父项：

  LayoutComponent

  （属于

  LayoutModule

  ）

从图中可以看出，每个页面都有一些特殊性：一些重定向，一些不可访问，一些没有路径。我能够实现此设置的唯一方法是在

布局模块

上设置所有路由，即使这样，我也无法覆盖所有情况（尤其是从根目录重定向到

/home

）。 另外，

/page3

和

/page4

都是不可访问的，但它们都有自己的组件，因为它们都有通过

注入的子对象的链接

由于每个页面都有自己的模块（子页面包含在其中），我希望能够在每个模块中设置路由，使所有内容与每个模块紧密相连，而不是散布在应用程序的代码中

以下是LayoutModule上定义的路由，稍后通过

RouterModule.forChild（路由）

导入：

是否可以在每个模块中定义路线？ 我很抱歉这样一个冗长的帖子，但我正试图提供尽可能多的洞察我的问题，因为我可以

---

我使用的是Angular 2.2.0和Angular router 3.2.0。

不仅可以在子模块中定义路由，而且是推荐的方法，因为它可以生成更干净、更易于维护的代码。看。整个指南构建了一个带有路由的hello world风格的应用程序，其中的子路由配置解决了您听起来想要做的事情

基于其他用户提供的链接，我能够为我的问题制定一个解决方案。正如我提到的，我的应用程序有两个部分，分别为经过身份验证的用户和未经身份验证的用户设置了不同的设置。对于未经身份验证的部分，我设置了一个模块，其中包含自己的路由和

路由器出口

（用于嵌套内容）

对于经过身份验证的部分（因为，除其他外，它在所有页面上共享一个导航栏和一个

路由器出口

），我创建了一个

布局模块

，并将其路由模块定义如下：

// import section

const routes: Routes = [{
  path: '',
  component: LayoutComponent,
  children: [
    ...Page1RoutingModule.routes,
    ...Page2RoutingModule.routes
    // and so on
  ]
}];

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

其中，

路由

是每个路由模块的公共变量，如下所示：

// imports

const routes: Routes = [{
  path: 'page1',
  component: Page1Component
}];

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

  public static routes = routes;
}

为了简单起见，我没有包括身份验证保护，但是通过这种方式，可以在LayoutRoutingModule上全局配置它们，或者在每个模块上轻松配置它们（如果出于某种原因，需要自定义规则来访问它们）

---

希望这有助于任何面临与我相同问题的人。

您是否查看了此文档，它深入讨论了模块中基于功能的分离路由，它们还讨论了延迟加载路由。请看这一点，希望这有帮助！！很抱歉回复太晚。感谢您的评论和参考。这真的很有帮助。我结束了我从这个链接中学到了很多东西。无论如何，我成功地解决了这个问题。请检查我的答案。谢谢你的参考。我能够在这个基础上找到一些有用的东西。请检查我的答案。

// imports

const routes: Routes = [{
  path: 'page1',
  component: Page1Component
}];

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

  public static routes = routes;
}