This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

CanLoad

Interface that a class can implement to be a guard deciding if a children can be loaded.

See more...

      
      interface CanLoad {
  canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean
}
    

Description

class UserToken {} class Permissions { canLoadChildren(user: UserToken, id: string): boolean { return true; } } @Injectable() class CanLoadTeamSection implements CanLoad { constructor(private permissions: Permissions, private currentUser: UserToken) {} canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean { return this.permissions.canLoadChildren(this.currentUser, route); } } @NgModule({ imports: [ RouterModule.forRoot([ { path: 'team/:id', component: TeamCmp, loadChildren: 'team.js', canLoad: [CanLoadTeamSection] } ]) ], providers: [CanLoadTeamSection, UserToken, Permissions] }) class AppModule {}
      
      
  1. class UserToken {}
  2. class Permissions {
  3. canLoadChildren(user: UserToken, id: string): boolean {
  4. return true;
  5. }
  6. }
  7.  
  8. @Injectable()
  9. class CanLoadTeamSection implements CanLoad {
  10. constructor(private permissions: Permissions, private currentUser: UserToken) {}
  11.  
  12. canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean {
  13. return this.permissions.canLoadChildren(this.currentUser, route);
  14. }
  15. }
  16.  
  17. @NgModule({
  18. imports: [
  19. RouterModule.forRoot([
  20. {
  21. path: 'team/:id',
  22. component: TeamCmp,
  23. loadChildren: 'team.js',
  24. canLoad: [CanLoadTeamSection]
  25. }
  26. ])
  27. ],
  28. providers: [CanLoadTeamSection, UserToken, Permissions]
  29. })
  30. class AppModule {}

You can alternatively provide a function with the canLoad signature:

@NgModule({ imports: [ RouterModule.forRoot([ { path: 'team/:id', component: TeamCmp, loadChildren: 'team.js', canLoad: ['canLoadTeamSection'] } ]) ], providers: [ { provide: 'canLoadTeamSection', useValue: (route: Route) => true } ] }) class AppModule {}
      
      
  1. @NgModule({
  2. imports: [
  3. RouterModule.forRoot([
  4. {
  5. path: 'team/:id',
  6. component: TeamCmp,
  7. loadChildren: 'team.js',
  8. canLoad: ['canLoadTeamSection']
  9. }
  10. ])
  11. ],
  12. providers: [
  13. {
  14. provide: 'canLoadTeamSection',
  15. useValue: (route: Route) => true
  16. }
  17. ]
  18. })
  19. class AppModule {}

Methods

canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean
      
      canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean
    

Parameters

route

Type: Route.

Returns

Observable<boolean> | Promise<boolean> | boolean