@angular/router

Resolve

interface

stable

Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked right after the ResolveStart router event. The router waits for the data to be resolved before the route is finally activated.

API

  interface Resolve<T> { resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any;}

resolve

any

@paramrouteActivatedRouteSnapshot

@paramstateRouterStateSnapshot

@returnsany

Description

The following example implements a resolve() method that retrieves the data needed to activate the requested route.

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

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

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

And you can access to your resolved data from HeroComponent:

@Component({ selector: "app-hero", templateUrl: "hero.component.html",})export class HeroComponent { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.data.subscribe(({ hero }) => { // do something with your resolved data ... }) }}

Usage Notes

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

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

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