diff --git a/packages/router/src/interfaces.ts b/packages/router/src/interfaces.ts index 522f64953f..f991838abd 100644 --- a/packages/router/src/interfaces.ts +++ b/packages/router/src/interfaces.ts @@ -265,23 +265,20 @@ export type CanDeactivateFn = * @description * * 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 will be invoked when the navigation starts. + * The router will then wait for the data to be resolved before the route is finally activated. * * ``` - * class Backend { - * fetchTeam(id: string) { - * return 'someTeam'; - * } - * } - * - * @Injectable() - * class TeamResolver implements Resolve { - * constructor(private backend: Backend) {} + * @Injectable({ providedIn: 'root' }) + * export class HeroResolver implements Resolve { + * constructor(private service: HeroService) {} * * resolve( * route: ActivatedRouteSnapshot, * state: RouterStateSnapshot * ): Observable|Promise|any { - * return this.backend.fetchTeam(route.params.id); + * return this.service.getHero(route.paramMap.get('id')); * } * } * @@ -289,42 +286,46 @@ export type CanDeactivateFn = * imports: [ * RouterModule.forRoot([ * { - * path: 'team/:id', - * component: TeamComponent, + * path: 'detail/:id', + * component: HeroDetailComponent, * resolve: { - * team: TeamResolver + * hero: HeroResolver * } * } * ]) * ], - * providers: [TeamResolver] + * exports: [RouterModule] * }) - * class AppModule {} + * export class AppRoutingModule {} * ``` * * You can alternatively provide a function with the `resolve` signature: * * ``` + * export const myHero: Hero = { + * // ... + * } + * * @NgModule({ * imports: [ * RouterModule.forRoot([ * { - * path: 'team/:id', - * component: TeamComponent, + * path: 'detail/:id', + * component: HeroComponent, * resolve: { - * team: 'teamResolver' + * hero: 'heroResolver' * } * } * ]) * ], * providers: [ * { - * provide: 'teamResolver', - * useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team' + * provide: 'heroResolver', + * useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero * } * ] * }) - * class AppModule {} + * export class AppModule {} * ``` * * @publicApi