Using Resolve In Angular2 Routes

by

Based on @angular/router v3-beta, these are the required steps.

Implement a resolver that returns an Observable or a plain value:

@Injectable()
export class HeroResolver implements Resolve {

    constructor(
        private service: HeroService
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> {
        const id = +route.params['id'];
        return Observable.fromPromise(this.service.getHero(id));
    }

}

Note that in case you return an observable, the unwrapped value (first one) will be available through route.snapshot.data.
If you want the observable itself to be available, then you need to wrap it in another Observable:

return Observable.of(source$);

Add the resolver to your route:

export const HeroesRoutes: RouterConfig = [
    { path: 'heroes',  component: HeroListComponent, resolve: { heroes: HeroesResolver } },
    { path: 'hero/:id', component: HeroDetailComponent, resolve: { hero: HeroResolver } }
];

Finally, provide your resolve class and any dependency to bootstrap or your main component providers:

bootstrap(AppComponent, [
    HeroesResolver, HeroService
])

Consume the resolved data from an ActivatedRoute instance:

ngOnInit() {
    this.hero = this.route.snapshot.data['hero'];
}

Remember that snapshot means the value at the state of execution, both in the component class and the resolver class.
Data can’t be refreshed from params updates with this approach.

Plunker: http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview
Source material: https://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. How to determine previous page URL in Angular?
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Angular: Cannot find a differ supporting object ‘[object Object]’
  7. Angular2 multiple router-outlet in the same template
  8. How to get current route
  9. ‘router-outlet’ is not a known element
  10. Angular2: Make route paths case insensitive
  11. Angular 2 Scroll to top on Route Change
  12. Angular 2 unit testing components with routerLink
  13. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  14. Angular2 – Redirect to calling url after successful login
  15. How can I conditionally disable the routerLink attribute?
  16. Angular 2: getting RouteParams from parent component
  17. Angular2 router keep query string
  18. Angular 2 passing object via route params possible?
  19. Multiple canActivate guards all run when first fails
  20. Can’t reload/refresh active route
  21. How do I navigate to a sibling route?
  22. Angular2 routing / deep linking not working with Apache 404
  23. Pass parameter into route guard
  24. Angular routerLink does not navigate to the corresponding component
  25. How to get parameter on Angular2 route in Angular way?
  26. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  27. Angular2 Routing – keeping state of component when route changes [duplicate]
  28. Angular 2 different components with same route
  29. Angular2 router, get route data from url, to display breadcrumbs
  30. Share data between components using a service in Angular2

Leave a Comment