Function type definition for a data provider.

See more...

type ResolveFn<T> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => Observable<T> | Promise<T> | T;

See also

• Route

Description

A data provider can be used with the router to resolve data during navigation. The router waits for the data to be resolved before the route is finally activated.

The following example implements a function that retrieves the data needed to activate the requested route.

interface Hero {
  name: string;
}
@Injectable()
export class HeroService {
  getHero(id: string) {
    return {name: `Superman-${id}`};
  }
}

export const heroResolver: ResolveFn<Hero> =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(HeroService).getHero(route.paramMap.get('id')!);
    };

bootstrapApplication(App, {
  providers: [provideRouter([{
    path: 'detail/:id',
    component: HeroDetailComponent,
    resolve: {hero: heroResolver},
  }])]
});

And you can access to your resolved data from HeroComponent:

@Component({template: ''})
export class HeroDetailComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.data.subscribe(
        ({hero}) => {
            // do something with your resolved data ...
        });
  }
}

Further information is available in the Usage Notes...

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',
    canActivate: [childGuard],
    component: ChildComponent,
    resolve: {childData: childDataResolver}
   }
 ]
}

The order of execution is: baseGuard, childGuard, baseDataResolver, childDataResolver.