{ "id": "api/router/CanLoad", "title": "CanLoad", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

CanLoadlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Interface that a class can implement to be a guard deciding if children can be loaded.\nIf all guards return true, navigation continues. If any guard returns false,\nnavigation is cancelled. If any guard returns a UrlTree, current navigation\nis cancelled and a new navigation starts to the UrlTree returned from the guard.

\n\n

See more...

\n
\n \n \n
\n\ninterface CanLoad {\n canLoad(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n}\n\n\n \n \n\n\n \n \n\n
\n\n \n\n \n \n
\n

Descriptionlink

\n

The following example implements a CanLoad function that decides whether the\ncurrent user has permission to load requested child routes.

\n\nclass UserToken {}\nclass Permissions {\n canLoadChildren(user: UserToken, id: string, segments: UrlSegment[]): boolean {\n return true;\n }\n}\n\n@Injectable()\nclass CanLoadTeamSection implements CanLoad {\n constructor(private permissions: Permissions, private currentUser: UserToken) {}\n\n canLoad(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {\n return this.permissions.canLoadChildren(this.currentUser, route, segments);\n }\n}\n\n

Here, the defined guard function is provided as part of the Route object\nin the router configuration:

\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'team/:id',\n component: TeamComponent,\n loadChildren: 'team.js',\n canLoad: [CanLoadTeamSection]\n }\n ])\n ],\n providers: [CanLoadTeamSection, UserToken, Permissions]\n})\nclass AppModule {}\n\n

You can alternatively provide an in-line function with the canLoad signature:

\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'team/:id',\n component: TeamComponent,\n loadChildren: 'team.js',\n canLoad: ['canLoadTeamSection']\n }\n ])\n ],\n providers: [\n {\n provide: 'canLoadTeamSection',\n useValue: (route: Route, segments: UrlSegment[]) => true\n }\n ]\n})\nclass AppModule {}\n\n\n \n
\n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n canLoad()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n canLoad(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n route\n Route\n \n \n
\n \n segments\n UrlSegment[]\n \n \n
\n\n \n
Returns
\n

Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n \n\n\n
\n
\n\n\n" }