In Angular, the ActivatedRouteSnapshot and ActivatedstateSnapshot are used to understand the working and use of a component.
The ActivatedRouteSnapshot is a static image of the route information, while the ActivatedstateSnapshot is a dynamic image of the current state of the route.
By using these two images we can understand the difference between a static and dynamic route.
In this article, we will take a look at the ActivatedRouteSnapshot and ActivatedstateSnapshot classes in Angular. We will see how they are used and what they are for.
By understanding these two classes, we can have a better understanding of how Angular routing works.
When working with the Angular Router, there are two different types of snapshots that can be used:
the ActivatedRouteSnapshot and the ActivatedStateSnapshot. Both of these snapshots provide information about the state of the router at a given moment in time.
However, they differ in how they get their information. The ActivatedRouteSnapshot gets its information from the current route tree, while the ActivatedStateSnapshot gets its information from the current router state.
Learning Objective
- What is ActivatedStateSnapshot.
- What is ActivatedRouteSnapshot.
- ActivatedRoute vs ActivatedRouteSnapshot
- How to get queryParams using ActivatedRouteSnapshot
- Summary
What is ActivatedStateSnapshot.
ActivatedstateSnapshot is a class that contains information about the state of an activated component. It includes information such as the component type,parameters,snapshots,and other metadata.
Tthis class is used by the Router to provide information about the state of a component when it is being navigated to.
Now how ActivatedstateSnapshot works in Angular ? ActivatedstateSnapshot is a new feature in Angular that allows you to store the state of your app before it is destroyed. This can be useful if you need to save data or perform certain operations before the app is destroyed.
@Component({templateUrl:'app-template.html'})
class MyComponent {
constructor(router: Router) {
let stateObj: RouterState = router.routerState;
let snapshot: RouterStateSnapshot = stateObj.snapshot;
console.log(snapshot);
}
}
ActivatedStateSnapshot works by storing the state of your app in a local storage object. When the app is destroyed, the state is retrieved from the local storage object and restored. This ensures that all data and operations are preserved and your app can continue to function normally.
There are some limitations to using ActivatedStateSnapshot, but overall it is a valuable tool for preserving the state of your Angular apps.
From angular router class we can access the routerState where we can find the state's snapshot , having all important information about the route like the complete url and data that can be found inside root object that is of type ActivatedRouteSnapshot.
What is ActivatedRouteSnapshot.
ActivatedRouteSnapshot and ActivatedstateSnapshot are two of the most important classes in Angular that help to manage routing.
They provide information about the current state of the router and a snapshot of the router state.
When a user navigates to a page on your Angular website, theAngular router uses the browser URL to find the corresponding route information.
Once it has retrieved this information, it proceeds to create a ActivatedRouteSnapshot instance.
The ActivatedRouteSnapshot instance contains information about the route, its parameters, and the data associated with that particular route. This instance is used by the router when it needs to determine what components should be rendered for that specific route.
Here's how you can access the ActivatedRouteSnapshot from router class.
@Component({templateUrl:'app-template.html'})
class MyComponent {
constructor(private router: Router) {
let stateObj: RouterState = router.routerState;
let snapshotObj: RouterStateSnapshot = stateObj.snapshot;
let activatedRouteRoot: ActivatedRouteSnapshot = snapshotObj.root;
console.log(activatedRouteRoot);
}
}
ActivatedRoute vs ActivatedRouteSnapshot
- To determine whether 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.
- If you utilize ActivatedRouteSnapshot with a parameter from the time in your route circumstance like product:id, you will not be any newer ID if the user changes them or your site does. Snapshot implies that it was at the time OnInit was executed, which it was at the present time. So, any changes are going to be disregarded.
- ActivatedRouteSnapshot is no mutable data structure.
- Similar to ActivatedRouteSnapshot, ActivatedRoute depicts the state of the router over time.
- In ActivatedRouteSnapshot, every node knows of the consumed URL segments, the parameters, and the resolved information.
- You can use the Snapshot function for initial values into a parameter once only during component initialization, and the URL will not change while the user is on this component.
- You're likely supposed to arrange the subscription, so you'll have to cancel it. You should additionally turn OnDestroy to stop the activated route. There's a lot of overhead for a static route.
How to get queryParams using ActivatedRouteSnapshot
The ActivatedRouteSnapshot is a service that allows you to access the queryParams of an Angular route. To use it, inject the ActivatedRouteSnapshot service into your class constructor and then call the get method passing in the name of the queryParam you want to retrieve.
If you want to retrieve all of the queryParams at once, you can call the paramMap method which will return an observable that emits a map of all the queryParams. You can then subscribe to this observable and use the data as needed.
import { Router, RouterStateSnapshot } from '@angular/router';
export class LoginComponent {
constructor(private router: Router) {
const snapshotObj: RouterStateSnapshot = router.routerState.snapshot;
console.log(snapshotObj);
}
}
Summary
Both snapshots are useful for different purposes. ActivatedRouteSnapshot is typically used for debugging purposes, while ActivatedStateSnapshot is used for retrieving information about the previous route.
The ActivatedRouteSnapshot and ActivatedstateSnapshot are both important in understanding the routing process in Angular.
By using these two, you can easily understand the routerState andurlTree. With this knowledge, you can build advanced routing applications with Angular.
Related articles
.jpg)
0 Comments