angularangular-routingangular2-router

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

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