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!
Difference between activatedroute and routerstateRouterState is an interface which represents the state of the router as a tree of activated routes. Every node of this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data.
The ActivatedRoute is the API that holds observable data that you can use to react to events with. You can subscribe to specific observable properties to get data from it asynchronously. The ActivatedRoute also contains ActivatedRouteSnapshot.
ActivatedRoutelink. Provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.
You can use the activated route to get active URL. (<RouterStateSnapshot>activatedRoute['_routerState']). url , if you like to type it.
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); });
There are 2 ways to get the parameter from the route.
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.
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.
Generally speaking, subscribing is the safest route if you're unsure.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With