What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4

What is the difference between ActivatedRouteSnapshot and ActivatedRoute in Angular 4? It's my understanding that ActivatedRouteSnapshot is a child of ActivatedRoute, meaning that ActivatedRoute contains ActivatedRouteSnapshot.

Incidentally, I tried running a Google search for an answer to this question, but I didn't find any of the search results to be understandable.

Thank you!

Solution 1:

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);
    });

Solution 2:

There are 2 ways to get the parameter from the route.

1. Snapshot (route.snapshot.paramMap.get). Read it during init.

Use the Snapshot if you only need the initial value of the parameter once during the component's initialization, and don't expect the URL to change while the user is still on that same component.

• I.e. if on a product/2 route, and the only way they'd get to product/3 is by going back to the product search screen and then clicking a product detail (leaving the detail component, then re-opening it with a new route param)

2. Observable (route.paramMap.subscribe). Subscribe to it during init.

Use the Observable if it's possible for the route to change while the user is still on the same component, and hence the Component's initialization would not be called again, but the observable would call your subscribed logic when the URL changed.

• I.e. if on a product/2 route, and you have a "next" button to go to the next id record product/3, hence the user did not leave/re-open the component but the URL did receive a new param.

Generally speaking, subscribing is the safest route if you're unsure.

Solution 3:

One of the key differences not highlighted by the other answers here is the fact that ActivatedRoute can be injected into a component, while ActivatedRouteSnapshot cannot.

As mentioned in this answer, you access ActivatedRouteSnapshot in a component by injecting ActivatedRoute, and then accessing its snapshot property, like so:

constructor(route: ActivatedRoute) { 
  let activatedRouteSnapshot = route.snapshot;
}

On the other hand, trying to inject ActivatedRouteSnapshot directly into the component will result in an error like this:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[YourComponent -> ActivatedRouteSnapshot]: StaticInjectorError(Platform: core)[YourComponent -> ActivatedRouteSnapshot]: NullInjectorError: No provider for ActivatedRouteSnapshot!

See also the documentation for ActivatedRoute and ActivatedRouteSnapshot