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