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

如果我错了，请纠正我，但我相信上述结构就像教科书一样。我真的很难用这种方法使路由工作

请查看下面我的路线：

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/edit/1（显示用户的详细信息）

---

我认为我的主要困难在于，我有一个用户管理组件，默认情况下，它应该显示的是用户列表组件。admin.component.html中有一个路由器出口，user-management.component.html中有一个路由器出口。这样的东西需要双路由插座吗？或者我应该直接显示在user-management-component.html页面上而不是路由器插座上吗？

以下是一个路由结构，它将直接对应于您建议的模块组件层次结构：

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

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

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

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

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

/admin/user management/user management 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 }
];

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

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

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

/admin/project management/project management 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 }
];

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

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

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

---

谢谢这正是我想要的。是的，UserManagementComponent中只有一个路由器出口，其他什么都没有。现在看看它是否有效。另外，如果您的

批准了
结构变得非常大，您可以将其分解，就像您在问题中所做的那样，但是，应该小心使用它，以便仍然实现适当的嵌套。通过查看所有子模块的树，可以更容易地推断路由。是的，正如您所看到的，Admin有路由，另外每个子模块都有路由。最小的东西可能会导致问题，特别是如果它们是以错误的顺序导入的。我想我会照你说的做，把所有的东西都放在应用程序路由中，然后慢慢地打破它。如果你看看我帖子中的管理路由，你会发现我使用的是一个无组件路由。我想这不是我应该做的，我不应该像你一样使用UserManagementComponent。有意义吗？如果您真的要将功能分离到功能模块中（如您所述），那么这将是有效的，但是您仍然需要确保您的路由嵌套是有效的，以便在加载该路由时，每个子级都有一个
要占用（如果您为路由加载单独的模块，则更难判断）。