What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4

by

Since ActivatedRoute can be reused, ActivatedRouteSnapshot is an immutable object representing a particular version of ActivatedRoute. It exposes all the same properties as ActivatedRoute as plain values, while ActivatedRoute exposes them as observables.

Here is the comment in the implementation:

export class ActivatedRoute {
  /** The current snapshot of this route */
  snapshot: ActivatedRouteSnapshot;

If a router reuses a component and doesn’t create a new activated route, you will have two versions of ActivatedRouteSnapshot for the same ActivatedRoute. Suppose you have the following routing configuration:

path: /segment1/:id,
component: AComponent

Now you navigate to:

/segment1/1

You will have the param in the activatedRoute.snapshot.params.id as 1.

Now you navigate to:

/segment1/2

You will have the param in the activatedRoute.snapshot.params.id as 2.

You can see it by implementing the following:

export class AComponent {
  constructor(r: ActivatedRoute) {    
    r.url.subscribe((u) => {
      console.log(r.snapshot.params.id);
    });

More Related Contents:

  1. How to get query parameters from URL in Angular 5?
  2. How do I navigate to a parent route from a child route?
  3. How to trace routing in Angular 2?
  4. Multiple named router-outlet angular 2
  5. How do I navigate to a sibling route?
  6. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  7. Best method to set different layout for different pages in angular 4
  8. Angular2 router, get route data from url, to display breadcrumbs
  9. Angular 2 – how round calculated number?
  10. Angular/RxJS When should I unsubscribe from `Subscription`
  11. Dynamically add event listener
  12. What is the equivalent of ngShow and ngHide in Angular 2+?
  13. How to use `trackBy` with `ngFor`
  14. Angular and Typescript: Can’t find names – Error: cannot find name
  15. Angular 2 Scroll to top on Route Change
  16. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  17. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  18. Angular 2 ‘component’ is not a known element
  19. How to make a sequence of http requests in Angular 6 using RxJS
  20. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  21. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  22. How to reset form validation on submission of the form in ANGULAR 2
  23. Angular 4 Lazy loading with named router-outlet not working
  24. Angular routerLink does not navigate to the corresponding component
  25. Default sorting in Angular Material – Sort header
  26. How to mock Angular 4.3 httpClient an error response in testing
  27. How to add multiple headers in Angular 5 HttpInterceptor
  28. Angular 6 – how to mock router.events url response in unit test
  29. Angular5: Deploying Angular application to multiple clients
  30. Cypress 12.8.1 not working with Stripe Elements iframe

Leave a Comment