What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4

Question

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!

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