Angular Router State

Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:

path is a string that uses the route matcher DSL.
pathMatch is a string that specifies the matching strategy.
matcher defines a custom strategy for path matching and supersedes path and pathMatch.
component is a component type.
redirectTo is the url fragment which will replace the current matched segment.
outlet is the name of the outlet the component should be placed into.
canActivate is an array of DI tokens used to look up CanActivate handlers.
canActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
canDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
canLoad is an array of DI tokens used to look up CanLoad handlers.
data is additional data provided to the component via ActivatedRoute.
resolve is a map of DI tokens used to look up data resolvers.
runGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
children is an array of child route definitions.
loadChildren is a reference to lazy loaded child routes.

Angular State

An Angular application is a tree of components. Some of these components are reusable UI components (e.g., list, table), and some are application components, which represent screens or some logical parts of the application. The router cares about application components, or, to be more specific, about their arrangements. Let’s call such component arrangements router states. In other words, a router state is an arrangement of application components that defines what is visible on the screen.

RouterState and RouterStateSnapshot
During a navigation, after redirects have been applied, the router creates a RouterStateSnapshot. What is RouterStateSnapshot, and how is it different from RouterState?

RouteStateSnapshot is an immutable data structure representing the state of the router at a particular moment in time. Any time a component is added or removed or parameter is updated, a new snapshot is created.

RouterState is similar to RouteStateSnapshot, except that it represents the state of the router changing over time.

RouterStateSnapshot
interface RouterStateSnapshot {
root: ActivatedRouteSnapshot;
}

interface ActivatedRouteSnapshot {
url: UrlSegment[];
params: {[name:string]:string};
data: {[name:string]:any};

queryParams: {[name:string]:string};
fragment: string;

root: ActivatedRouteSnapshot;
parent: ActivatedRouteSnapshot;
firstchild: ActivatedRouteSnapshot;
children: ActivatedRouteSnapshot[];
}

As you can see RouterStateSnapshot is a tree of activated route snapshots. Every node in this tree knows about the “consumed” URL segments, the extracted parameters, and the resolved data. To make it clearer, let’s look at this example:

 

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page