Angular 2 router resolve with Observable

by

Don’t call subscribe() in your service and instead let the route subscribe.

Change

return this.searchService.searchFields().subscribe(fields => {

to

import 'rxjs/add/operator/first' // in imports

return this.searchService.searchFields().map(fields => {
  ...
}).first();

This way an Observable is returned instead of a Subscription (which is returned by subscribe()).

Currently the router waits for the observable to close. You can ensure it gets closed after the first value is emitted, by using the first() operator.

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  4. How do I create a singleton service in Angular 2?
  5. Warn user of unsaved changes before leaving page
  6. ‘router-outlet’ is not a known element
  7. Passing data into “router-outlet” child components
  8. Angular 2 unit testing components with routerLink
  9. How to pass query parameters with a routerLink
  10. Dynamic routing based on external data
  11. How to switch layouts in Angular2
  12. How do I detect user navigating back in Angular2?
  13. Using Resolve In Angular2 Routes
  14. Angular2 – Interaction between components using a service
  15. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  16. Best way to “flatten” an array inside an RxJS Observable
  17. Angular2 router.navigate refresh page
  18. Angular 2 passing object via route params possible?
  19. Lazy Loading BrowserModule has already been loaded
  20. Redirect to a different component inside @CanActivate in Angular2
  21. Angular 2 – Routing – CanActivate work with Observable
  22. Want to prevent Component recreation while routing in Angular 2
  23. New Angular2 router configuration
  24. Angular routerLink does not navigate to the corresponding component
  25. What is pipe for in RxJS?
  26. How to get parameter on Angular2 route in Angular way?
  27. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  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