Организация угловых функциональных модулей и их подмодулей с маршрутизацией

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, это будет отображать UserListComponent внутри UserManaementComponent (учитывая, что UserManagementComponent имеет <router-outlet>). Если вы нажмете на ссылку на /admin/users/edit/:id (где :id какое-то удостоверение личности), то UserListComponent будет обменяться с UserDetailComponent внутри UserManagementComponent,

Аналогично для "проектной" стороны.

редактировать

Если вы хотите разбить функциональные модули, вы можете сделать это следующим образом:

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}
];