Angular
Search…
Resolvers
A class that implements the Resolve interface (or a function with the same signature as the resolve() method) that you use to produce or retrieve data that is needed before navigation to a requested route can be completed.
Resolvers run after all route guards for a route tree have been executed and have succeeded. See an example of using a resolve guard to retrieve dynamic data.

Resolve

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 when the navigation starts. The router waits for the data to be resolved before the route is finally activated.

Description

The following example implements a resolve() the method that retrieves the data needed to activate the requested route.
1
content_copy@Injectable({ providedIn: 'root' })
2
export class HeroResolver implements Resolve<Hero> {
3
constructor(private service: HeroService) {}
4
5
resolve(
6
route: ActivatedRouteSnapshot,
7
state: RouterStateSnapshot
8
): Observable<any>|Promise<any>|any {
9
return this.service.getHero(route.paramMap.get('id'));
10
}
11
}
Copied!
Here, the defined resolve() function is provided as part of the Route object in the router configuration:
1
content_copy@NgModule({
2
imports: [
3
RouterModule.forRoot([
4
{
5
path: 'detail/:id',
6
component: HeroDetailComponent,
7
resolve: {
8
hero: HeroResolver
9
}
10
}
11
])
12
],
13
exports: [RouterModule]
14
})
15
export class AppRoutingModule {}
Copied!
You can alternatively provide an in-line function with the resolve() signature:
1
content_copyexport const myHero: Hero = {
2
// ...
3
}
4
5
@NgModule({
6
imports: [
7
RouterModule.forRoot([
8
{
9
path: 'detail/:id',
10
component: HeroComponent,
11
resolve: {
12
hero: 'heroResolver'
13
}
14
}
15
])
16
],
17
providers: [
18
{
19
provide: 'heroResolver',
20
useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero
21
}
22
]
23
})
24
export class AppModule {}
Copied!
Copy link