-1

我试图遵循Angular中的功能模块方法 .

我有一个带有管理模块的应用程序 . 在该模块中将是子模块（即用户管理，项目管理） .

Below is the structure I came up with:

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

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

Please see my routes below:

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

The way I would like things to navigate is the following:

/ admin（除了admin.component.html布局之外什么都不显示 - 有一天会显示一个仪表板组件）
/ admin / users（显示用户列表）
/ admin / users / edit / 1（显示用户的详细信息）

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

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

这将为您提供一个主"admin"页面，除了来自模板的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}
];

回复于 2024-05-06T23:00:34+08:00

使用路由组织Angular功能模块及其子模块

1 回答

编辑

相关问题