Angular 5：我可以导航到模块的路由，而无需在 URL 中包含模块的路径段？

Question

所以我构建了一个 Angular 5.2.0 应用程序，我将其分为 3 个模块：

一个 admin 模块，当用户导航到任何 admin/** 路线时加载，
一个 prefect 模块，当用户导航到任何 prefect/** 路线时加载，
一个 authentication 模块，在其他情况下加载。

每个模块都有自己的路由。例如/admin/student/list 激活 admin 模块中定义的 StudentListComponent。

现在如果我转到 /student/list，没有 /admin 部分，它将加载相同的 StudentListComponent！这可以通过应用程序模块中定义的每条路线进行复制。

这显然不是理想的行为。特别是考虑到我有路由保护来保护 admin 和 prefect 模块，这使得绕过它们变得非常容易。

任何见解表示赞赏。这是一个错误吗？还是我做错了什么？

这是我在 app.module.ts:

中的代码

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: 'app/modules/admin/admin.module#AdminModule',
    canActivate: [AdminGuard]
  },
  {
    path: 'prefect',
    loadChildren: 'app/modules/prefect/prefect.module#PrefectModule',
    canActivate: [PrefectGuard]
  },
  {
    path: '',
    loadChildren:
      'app/modules/authentication/authentication.module#AuthenticationModule'
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    AuthenticationModule,
    PrefectModule,
    AdminModule
  ],
  providers: [AdminGuard, PrefectGuard],
  bootstrap: [AppComponent]
})
export class AppModule {}

在admin.module.ts中：

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: 'student',
        children: [
          {
            path: 'list',
            component: StudentListComponent
          },
          {
            path: 'new',
            component: StudentEditComponent
          },
          {
            path: ':id',
            component: StudentItemComponent
          },
          {
            path: ':id/edit',
            component: StudentEditComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    HttpClientModule,
    FormsModule,
    // Angular Material modules...
    NavigationModule
  ],
  providers: [StudentService],
  declarations: [
    AdminComponent,
    StudentListComponent,
    StudentItemComponent,
    StudentEditComponent
  ]
})
export class AdminModule {}

在authentication.module.ts中：

const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'reset',
        component: ResetPasswordComponent
      },
      {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FormsModule,
    // Angular Material modules...
  ],
  providers: [AuthenticationService, AdminService, StudentService],
  declarations: [
    AuthenticationComponent,
    LoginComponent,
    ResetPasswordComponent
  ]
})
export class AuthenticationModule {}

Answer 1

您正在此处导入您的 lazy-loaded AdminModule 到您的应用程序组件中：

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   RouterModule.forRoot(routes),
   AuthenticationModule,
   PrefectModule,
   AdminModule
],

所以它实际上不是 lazy-loaded 而是在 AppModule 加载时加载的。因此 AdminModule 的路由可以从 '/admin' since 和 root : '/' 访问。只需将它从您的 AppModule 的导入中删除，它应该没问题。

我创建了一个小型存储库，其中包含您要实现的目标的工作示例 here

希望对您有所帮助

Answer 2

好的，我找到了解决方案：在 app.module.ts 中，我正在导入功能模块（AdminModule 等），并且以某种方式产生了这种效果。

我删除了这些导入，问题解决了。

Angular 5：我可以导航到模块的路由，而无需在 URL 中包含模块的路径段？

Angular 5: I can navigate to a module's route without including the module's path segment in the URL?

javascript

web-applications

typescript

angular

angular-router