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

Question

我正在关注这个 tutorial拥有我的应用程序的架构。

要提供更多信息，请考虑 A作为 appModule，和 B是另一个主要模块。现在我想在 B 的 NgModule 中加载其他模块( <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、页脚，在中心我想使用 <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{}

//用户.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{}

//主板.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-board 中拥有所有路由？模块路由？

Answer 1

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