如何在Angular2中添加ngModule路由作为另一个ngModule的子路由？

Question

我正在遵循本教程,以获得我的应用程序的体系结构.

为了提供更多信息,我们可以将其A视为appModule,并且B是另一个主要模块.现在我想NgModule在B里面加载其他模块(有许多其他路由)<router-outlet>.

有什么更好的方法来做到这一点？

这就是我到目前为止所做的

-mainBoard (Folder next to app.Module)
    --mainBoard Routes
    --mainBoard Component
    --mainHeader Component
    --mainFooter Component
    --mainSidenav Component

    -Users  (Folder inside mainBoard)
    --User Module
    --User Routes
    --UserList Component
    --UserDetail Component
    --UserSetting Component

    -Departments (Folder inside mainBoard)
    --Department Module
    --Department Routes
    --DepartmentList Component
    --DepartmentDetail Component

-Auth (Folder next to mainBoard folder)
    --Auth Module
    --Auth Component
    --Auth Routes
    -Sign-in (Folder)
    --Sign-in Component
    -Sign-up (Folder)
    --Sign-up Component

-App Module

我有2个主要模块,mainBoard和Auth.MainBoard有一个标题,sidenav,footer,在中心我想加载用户和部门<router-outlet>.

我想加载localhost/app/users以加载用户localhost/app/department列表并加载部门列表.

我的main-board.module和users.module看起来像这样

// main-board.module.ts
import {MainBoardRouting} from './main-board.routes';

import {UsersModule} from './users/users.module';
import {DepartmentsModule} from './departments/departments.module';

@NgModule({
    imports :[
        MainBoardRouting,
        UsersModule,
        DepartmentsModule
    ],
    declarations : [
        MainBoardComponent,
        MainHeaderComponent,
        MainFooterComponent,
        MainSidenavComponent
    ],
    providers: []
})
export class MainBoardModule{}

// Users.module.ts

import {NgModule} from '@angular/core';

import {usersRouting} from './users.routes';
import {UserListComponent} from './user-list';
import {UserDetailComponent} from './user-detail';

@NgModule({
    imports :[
        usersRouting
    ],
    declarations : [
        UserListComponent,
        UserDetailComponent
    ],
    providers: []
})
export class UsersModule{}

// main-board.routes

import { RouterModule,Routes } from '@angular/router';

import {  MainBoardComponent  } from './main-board.component';

const MainBoardRoutes: Routes = [{
    path: 'app',
    component: MainBoardComponent
}];
export const MainBoardRouting = RouterModule.forChild(MainBoardRoutes);

//用户路由

import { Routes, RouterModule } from '@angular/router';

import { UserListComponent }    from './user-list';
import { UserDetailComponent }  from './user-detail';

export const usersRoutes: Routes = [
  {path: '', redirectTo: 'app/users', pathMatch:'full'},
  { path: 'users',  component: UserListComponent },
  { path: 'user/:id', component: UserDetailComponent }
];

export const usersRouting = RouterModule.forChild(usersRoutes);

我的方法是否正确让孩子NgModule使用他们自己的路线,或者我是否必须将它们更改为简单组件并拥有main-boardModule路线中的所有路线？

Answer 1

你的方法论是正确的。在这种方法中，只需将子模块导入到父模块中，就是这样。子模块将处理它自己的路由。同样，如果您有嵌套模块，则只需在父路由中导入模块，而不是在一处声明大量路由。