用路由组织Angular特征模块及其子模块

Question

我正在尝试遵循Angular中的功能模块方法。

我有一个带有管理模块的应用程序。 子模块（即用户管理，项目管理）内将包含子模块。

下面是我想出的结构：

app.component.css
app.component.html
app.component.ts
app.module.ts
app-routing.module.ts

   admin/
      admin.component.css
      admin.component.html
      admin.component.ts
      admin.module.ts
      admin-routing.module.ts

      user-management/
         user-management.component.css
         user-management.component.html
         user-management.component.ts
         user-management.module.ts
         user-management-routing.module.ts

         user-list/
            user-list.component.css
            user-list.component.html
            user-list.component.ts

         user-detail/
            user-detail.component.css
            user-detail.component.html
            user-detail.component.ts

      project-management/
         project-management.component.css
         project-management.component.html
         project-management.component.ts
         project-management.module.ts
         project-management-routing.module.ts

         project-list/
            project-list.component.css
            project-list.component.html
            project-list.component.ts

         project-detail/
            project-detail.component.css
            project-detail.component.html
            project-detail.component.ts

如果我错了，请指正我，但是我相信上面的结构就像它的教科书一样。 我真的很努力地使路由使用这种方法。

请在下面查看我的路线：

const appRoutes: Routes = [
   { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: 
  [AuthGuard] },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

    const adminRoutes: Routes = [
      {
        path: '',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            canActivateChild: [AuthGuard],
            children: [
              { path: 'users', component: UserManagementComponent },
              { path: 'projects', component: ProjectManagementComponent }
            ]
          }
        ]
      }
    ];

    const manageUsers: Routes = [
      {path: 'users', component: UserListComponent},
      {path: 'users/edit/:id', component: UserDetailComponent}
    ];

    const manageProjects: Routes = [
      {path: 'projects', component: ProjectListComponent},
      {path: 'projects/edit/:id', component: ProjectDetailComponent}
    ];

我希望导航的方式如下：

/ admin（除admin.component.html布局外不显示任何内容-某天将显示一个仪表板组件）
/ admin / users（显示用户列表）
/ admin / users / edit / 1（显示用户的详细信息）

我认为我的主要难题是我拥有一个用户管理组件，默认情况下，真正应该显示在其上的是用户列表组件。 admin.component.html中有一个路由器出口，而user-management.component.html中有一个路由器出口。 像这样的事情是否需要一个双重出口？还是我应该直接在user-management-component.html页面上显示而不是路由器出口？

Answer 1

这是一个与您建议的模块组件层次结构直接对应的路由结构：

const appRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent, // has <router-outlet>
    children: [
      {
        path: 'users',
        component: UserManagementComponent, // has <router-outlet>
        children: [
          {
            path: '',
            component: UserListComponent
          },
          {
            path: 'edit/:id',
            component: UserDetailComponent
          }
        ]
      },
      {
        path: 'projects',
        component: ProjectManagementComponent, // has <router-outlet>
        children: [
          {
            path: '',
            component: ProjectListComponent
          },
          {
            path: 'edit/:id',
            component: ProjectDetailComponent
          }
        ]
      }
    ]
  },
  { path: '', redirectTo: '/admin' },
  { path: '**', component: PageNotFoundComponent }
];

这将为您提供一个主要的“管理”页面，该页面除了模板中的HTML之外（如果包含<router-outlet>之外的任何内容），什么都不显示。 导航到/admin/users ，它将在UserManaementComponent内部显示UserListComponent （考虑到UserManagementComponent具有<router-outlet> ）。 如果单击指向/admin/users/edit/:id （其中:id是一些ID），则UserListComponent将与UserManagementComponent内部的UserDetailComponent交换。

同样对于“项目”方面。

编辑

如果要细分为功能模块，可以这样做：

app-routing/module.ts

// From app-routing.module.ts
const appRoutes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
  },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

/admin/admin-routing.module.ts

// From /admin/admin-routing.module.ts
const ADMIN_ROUTES: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          { path: 'users', loadChildren: './admin/user-management/user-management.module#UserManagementModule' },
          { path: 'projects', loadChildren: './admin/project-management/project-management.module#ProjectManagementModule' }
        ]
      }
    ]
  }
];

/admin/user-management/user-management-routing.module.ts

// From /admin/user-management/user-management-routing.module.ts
const USER_MANAGEMENT_ROUTES: Routes = [
  {path: '', component: UserListComponent},
  {path: 'edit/:id', component: UserDetailComponent}
];

/admin/project-management/project-management-routing.module.ts

// From /admin/project-management/project-management-routing.module.ts
const PROJECT_MANAGEMENT_ROUTES: Routes = [
  {path: '', component: ProjectListComponent},
  {path: 'edit/:id', component: ProjectDetailComponent}
];