Angular2路线

Question

我目前正在开展一个Angular 2项目，即使所有关注路线似乎工作得相对较好，但我对我如何完成这项工作并不完全满意。

这里的图表与我用于我们的应用的结构非常匹配：

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

• 未经过身份验证的页面（图中涂成红色）均采用相同的设计;除了他们的形式和行动，他们看起来几乎一样。因此，我创建了一个模板并添加了<router-outlet>来注入所需的部分。
• 经过身份验证的页面都具有相同的结构：导航栏和<router-outlet>以注入其内容;因此，它们都共享同一个父级：LayoutComponent（属于LayoutModule）。

从图中可以看出，每个页面都有一些特殊性：一些重定向，一些不可访问，一些没有路径。我能够实现此设置的唯一方法是在LayoutModule上设置所有路由，即便如此，我也无法涵盖所有​​情况（特别是从根到{{1}的重定向}）。 此外，/home和/page3无法访问，但每个都有自己的组件，因为它们有链接到达通过/page4注入的子项。

由于每个页面都有自己的模块（并且子页面包含在其中），我希望能够在每个模块中设置路径，使每个模块都保持紧密，不会在应用程序周围传播＃39;代码。

以下是LayoutModule上定义的路由，稍后通过<router-outlet>导入：

RouterModule.forChild(ROUTES)

是否可以在每个模块中定义路线？ 对于这么冗长的帖子我很抱歉，但我尽可能多地提供有关我的问题的见解。

我使用Angular 2.2.0并使用angular-router 3.2.0。

Answer 1

不仅可以在子模块中定义路由，它是推荐的方法，因为它可以产生更清晰，更易于维护的代码。请参阅routing and navigation docs on angular.io。整个指南构建了一个带路由的hello-world风格的应用程序，其中Child Route Configuration解决了你想要做的事情

Answer 2

根据其他用户提供的链接，我能够为我的问题制作解决方案。正如我所提到的，我的应用程序有两个部分，对经过身份验证和未经身份验证的用户具有不同的设置对于未经过身份验证的部分，我使用自己的路由和char[]设置了一个模块（对于嵌套内容）。

对于经过身份验证的部分（因为，除了其他方面，它在所有页面中共享了一个导航栏和router-outlet，我创建了一个router-outlet，并将其路由模块定义如下：< / p>

LayoutModule

其中// 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 { } 是每个路由模块的公共变量，如下所示：

routes

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

希望这可以帮助任何面临同样问题的人。