Angular 6:带有模块的一条主要受保护父路线

时间:2018-09-07 01:54:06

标签: angular routes

我们目前正在使用Angular 6构建管理应用程序。我们刚刚起步,但希望尽早应用最佳实践,并希望使用最适合我们的最佳结构和模块。为此,我们决定使用RouterModule.forRootRouterModule.forChild处理每个模块的路由(不想有一个single肿的单个文件)。

作为管理员,我们希望所有应用程序都受到保护(使用Guard)。但是,在路由模块化方面,我们面临着有关父路由和子路由的问题。

比方说,我们有一个主要的AppRoutingModule,其中包含以下内容:

const appRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: []
  },
  { path: 'oauth/callback', component: AuthComponent }
];

@NgModule({
  declarations: [
    AuthComponent
  ],
  exports: [
    RouterModule
  ],
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppRoutingModule {}

现在假设我们还有另一个模块,UsersRoutingModule,其中包含:

const usersRoutes: Routes = [
  {
    path: '/users',
    component: UsersComponent
  }
];

@NgModule({
  exports: [
    RouterModule
  ],
  imports: [
    RouterModule.forChild(usersRoutes)
  ]
})
export class UsersRoutingModule {}

我们如何在上述模块中定义路由,就等同于此:

[
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'users', component: UsersComponent }
    ]
  },
  { path: 'oauth/callback', component: AuthComponent }
]

1 个答案:

答案 0 :(得分:0)

您好,您做得对,所以请放心,最佳实践(据我所知)是将每个更大的(逻辑连接)代码块分隔在一个单独的模块中(例如-administration.moduledashboard.moduleshopping-cart.module,...)。每个模块必须具有其自己的路由模块(例如您发布的第二个片段),并且所有这些模块都必须延迟加载到其父级路由模块中。

// App.module
//** Some imports */
@NgModule({
  imports: [
    ...
    AppRoutingModule,
    ...
  ],
  declarations: [
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

// App.routing-module

//** Some imports */

const appRoutes: Routes = [
  // Lazy loaded module
  {
    path: 'crisis-center',
    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
  }
  { path: '**', component: PageNotFoundComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: [CanDeactivateGuard]
})
export class AppRoutingModule {}


//** crisis-center.module/
//** Some imports */
@NgModule({
  imports: [
    ...
    CrisisCenterRoutingModule,
    ...
  ],
  declarations: [
    ...
  ],
})
export class CrisisCenterModule {}

//** crisis-center.routing
//** Some imports */
const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: Some-wrap-component,
    children: [
      {
        path: '',
        component: Some-component
      }
    ]
  }
];
 
@NgModule({
  imports: [
    RouterModule.forChild(crisisCenterRoutes)
  ],
  exports: [
    RouterModule
  ],
})
export class CrisisCenterRoutingModule { }

如果您的Admin.module非常大,则可以将其形式的逻辑分离到更多模块中,例如(manage-users.modulemanage-projects.module,...),然后再次使用惰性加载策略。

P.S。大部分代码来自Angular Docs,希望对您有所帮助,如果您想实施所有最佳路由实践,也建议您考虑使用不同的preloadingStrategy:)