interface
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.
interface Resolve<T> { resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T }
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<any>|Promise<any>|any { 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 {}
You can alternatively provide an in-line function with the resolve()
signature:
export const myHero: Hero = { // ... } @NgModule({ imports: [ RouterModule.forRoot([ { path: 'detail/:id', component: HeroComponent, resolve: { hero: 'heroResolver' } } ]) ], providers: [ { provide: 'heroResolver', useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero } ] }) export class AppModule {}
resolve() | ||||||
---|---|---|---|---|---|---|
|
route | ActivatedRouteSnapshot | |
state | RouterStateSnapshot |
Observable<T> | Promise<T> | T
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.
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/router/Resolve