以角度 6 将路线拆分为单独的模块答案

【问题标题】：Split routes into separate modules in angular 6以角度 6 将路线拆分为单独的模块
【发布时间】：2019-01-03 16:45:37
【问题描述】：

我正在开发一个 Angular 6 应用程序。目前我正在为路由而苦苦挣扎。我很感兴趣，无论我的结构，我想象的是否可以工作。所以它看起来像这样：

App 模块 - 包含主路由和一些父路由，其中定义了布局。像这样：

const routes: Routes = [
{
    path: 'login',
    component: LoginComponent
},
{
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
    // {
    //   path: 'brands',
    //   loadChildren: 'app/modules/brands/brands.module#BrandsModule',
    //   pathMatch: 'prefix'
    // }
    ]
}
];

@NgModule({
    imports: [RouterModule.forRoot(routes), BrandsModule, ItemsModule],
    exports: [RouterModule],
    providers: [BosRouteLoader]
})
export class RoutingModule {}

我的一个功能模块在这样的模块中定义了自己的路由：

const routes: Routes = [
{
    path: 'brands',
    children: [
    { path: '', component: BrandListComponent },
    { path: ':id', component: BrandDetailComponent },
    { path: '**', redirectTo: '' }
    ]
}];


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

我想实现每个功能模块都定义自己的路由，并将这些路由注册为 App 模块的子路由。

通过延迟加载，我可以管理它，但我必须在我的 App 模块中再定义一个路由，但我只想在功能模块中定义它。

如果我在没有延迟加载的情况下执行此操作，那么我在 App 组件中的父路由永远不会被命中。所以如果我去 http://localhost/brands 它将加载适当的 BrandLisComponent 但没有 LayoutComponent。

有没有办法在功能模块中定义路由并将它们注册为主路由模块的子模块？

【问题讨论】：

如果你为BrandRountingModule使用子路由，你需要给它一个component属性，而不仅仅是children！然后使用<router-outlet> 标签来解决这些孩子。但通常我没有得到你想要达到的目标。什么是 ItemListComponent 和 localhost/items ？！
@imans77 我想实现，如果我去 /brands 路线然后 LayoutComponent 和 BrandListComponent 将是活动的。现在只有brandComponent处于活动状态，没有布局......

标签： javascript angular typescript routing

【解决方案1】：

概念是您在更高级别的模块中定义一个模块路由，然后在您想要的模块中定义它的子模块。

所以在你的情况下，你需要告诉角度，嘿，当有人去brands 路由时，使用BrandsRoutingModule 路由。

所以在您的应用模块中，您将拥有：

{
    path: 'brands',
    loadChildren: 'app/modules/brands/brands.module#BrandsModule',
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
}

这表明如果用户转到/brand，您需要加载该模块的路由。

然后在您的BrandsRoutingModule 中，您需要将路由定义为：

{
    path: '',
    component: LayoutComponent,
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: BrandListComponent },
        { path: ':id', component: BrandDetailComponent },
        { path: '**', redirectTo: '' }
    ]
}

因此，每当我们路由到/brands 时，我们将看到LayoutComponent 作为与之相关的主要路由，然后BrandListComponent 和其他路由将作为他的孩子出现。但是为了给他的孩子看，你还需要把这行代码放在你的layout.component.html：

<router-outlet></router-outlet>

这告诉 angular，嘿，如果他要去 /brands/2，你需要加载 BrandDetailComponent inside LayoutComponent，字面上是他的孩子。

希望对你有帮助。

【讨论】：

@thadam 如果您的问题已解决，请将其标记为正确答案，如果不是，请告诉我哪里出错了 :)

【解决方案2】：

Imans77 的答案适用于延迟加载的模块（尽管来自 LoadChildren is now deprecated 的字符串）。但是，对于预先加载的模块，如果您想整理主路由模块并将文件拆分到不同的模块，您可以尝试以下方法：

app-routing.module.ts

const MODULE_ROUTES = [...module1Routes, module2Routes];

const routes: Routes = [

  { path: 'path1', component: Path1Component },
  { path: 'path2', component: Path2Component },
  ...MODULE_ROUTES,
];

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

您可以为每个功能模块创建一个 *.route.ts 文件，而不是在主路由文件中声明每个组件/模块的所有子级，您可以在其中以正常方式声明和导出路由。例如：

export const module1Routes: Routes = [
{
    path: 'brands',
    children: [
        { path: '', component: BrandListComponent },
        { path: ':id', component: BrandDetailComponent },
        { path: '**', redirectTo: '' }
    ]
}];

通过将其导入主路由文件，它们将立即可用于 Angular。

【讨论】：