时间戳

首页 > 解决方案 > 以角度 6 将路线拆分为单独的模块

javascript - 以角度 6 将路线拆分为单独的模块

问题描述

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

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

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。

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

标签： javascriptangulartypescriptrouting

解决方案

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

所以在你的情况下，你需要告诉角度，嘿，当有人去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视为相对于那个的主要路线，然后 theBrandListComponent和其他人将作为他的孩子来。但是为了给他的孩子们看，你还需要把这行代码放在你的layout.component.html:

<router-outlet></router-outlet>

这告诉 Angular，嘿，如果他要去，例如/brands/2，你需要加载BrandDetailComponent 里面，LayoutComponent字面意思是他的孩子。

希望能帮助到你。

推荐阅读