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

Resolvelink

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

Interface that classes can implement to be a data provider.\nA data provider class can be used with the router to resolve data during navigation.\nThe interface defines a resolve() method that is invoked when the navigation starts.\nThe router waits for the data to be resolved before the route is finally activated.

\n\n

See more...

\n
\n \n \n
\n\ninterface Resolve<T> {\n resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T\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 resolve() method that retrieves the data\nneeded to activate the requested route.

\n\n@Injectable({ providedIn: 'root' })\nexport class HeroResolver implements Resolve<Hero> {\n constructor(private service: HeroService) {}\n\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<any>|Promise<any>|any {\n return this.service.getHero(route.paramMap.get('id'));\n }\n}\n\n

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

\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'detail/:id',\n component: HeroDetailComponent,\n resolve: {\n hero: HeroResolver\n }\n }\n ])\n ],\n exports: [RouterModule]\n})\nexport class AppRoutingModule {}\n\n

You can alternatively provide an in-line function with the resolve() signature:

\n\nexport const myHero: Hero = {\n // ...\n}\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'detail/:id',\n component: HeroComponent,\n resolve: {\n hero: 'heroResolver'\n }\n }\n ])\n ],\n providers: [\n {\n provide: 'heroResolver',\n useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero\n }\n ]\n})\nexport class AppModule {}\n\n\n

Further information available in the Usage Notes...

\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 resolve()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n route\n ActivatedRouteSnapshot\n \n \n
\n \n state\n RouterStateSnapshot\n \n \n
\n\n \n
Returns
\n

Observable<T> | Promise<T> | T

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

Usage noteslink

\n

When both guard and resolvers are specified, the resolvers are not executed until\nall guards have run and succeeded.\nFor example, consider the following route configuration:

\n\n{\n path: 'base'\n canActivate: [BaseGuard],\n resolve: {data: BaseDataResolver}\n children: [\n {\n path: 'child',\n guards: [ChildGuard],\n component: ChildComponent,\n resolve: {childData: ChildDataResolver}\n }\n ]\n}\n\n

The order of execution is: BaseGuard, ChildGuard, BaseDataResolver, ChildDataResolver.

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