Angular 5:我可以导航到模块的路由,而不在URL中包含模块的路径段?

时间:2018-03-31 06:27:01

标签: javascript angular typescript web-applications angular-router

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

  • 用户导航到任意admin路线时要加载的admin/**模块,
  • 要在用户导航到任意prefect路线时加载的prefect/**模块,
  • authentication模块,将在其他所有情况下加载。

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

现在,如果我转到/student/list,而没有/admin部分,则会加载相同的StudentListComponent!这可以通过应用程序模块中定义的每个路径重现。

这显然不是理想的行为。特别是考虑到我有保护adminprefect模块的路线防护装置,这使得它很容易绕过它们。

任何见解都表示赞赏。这是一个错误吗?或者我做错了什么?

这是我在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 {}

2 个答案:

答案 0 :(得分:1)

您在应用程序组件中导入了延迟加载的AdminModule:

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

所以它实际上不是延迟加载的,而是在AppModule时加载的。所以AdminModule的路线都可以从' / admin'既然和根:' /'。 只需从AppModule的导入中删除它,它应该没问题。

我创建了一个小型回购,其中包含您尝试实现的实例here

希望有所帮助

答案 1 :(得分:0)

好的,我找到了解决方案:在app.module.ts中,我导入了要素模块(AdminModule等)并以某种方式产生了这种效果。

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