Question

我正在开发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。

是否可以在功能模块中定义路线并将其注册为主要主要路由模块的子级？

Answer 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>中放入以下代码行：

/brands/2

这告诉角度，嘿，如果他要去BrandDetailComponent，则需要将LayoutComponent 放入内部{b> {

希望有帮助。

Answer 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。

以角度6

2 个答案: