{"id":59892,"date":"2018-05-03T15:58:23","date_gmt":"2018-05-03T10:28:23","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59892"},"modified":"2024-04-12T14:20:50","modified_gmt":"2024-04-12T08:50:50","slug":"angular-router-state","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-router-state\/","title":{"rendered":"Angular Router State"},"content":{"rendered":"

Angular Router State<\/h1>\n

Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:<\/p>\n

path is a string that uses the route matcher DSL.
\npathMatch is a string that specifies the matching strategy.
\nmatcher defines a custom strategy for path matching and supersedes path and pathMatch.
\ncomponent is a component type.
\nredirectTo is the url fragment which will replace the current matched segment.
\noutlet is the name of the outlet the component should be placed into.
\ncanActivate is an array of DI tokens used to look up CanActivate handlers.
\ncanActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
\ncanDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
\ncanLoad is an array of DI tokens used to look up CanLoad handlers.
\ndata is additional data provided to the component via ActivatedRoute.
\nresolve is a map of DI tokens used to look up data resolvers.
\nrunGuardsAndResolvers 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.
\nchildren is an array of child route definitions.
\nloadChildren is a reference to lazy loaded child routes.<\/p>\n

Angular State<\/strong><\/p>\n

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\u2019s 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.<\/p>\n

RouterState and RouterStateSnapshot
\nDuring a navigation, after redirects have been applied, the router creates a RouterStateSnapshot. What is RouterStateSnapshot, and how is it different from RouterState?<\/p>\n

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.<\/p>\n

RouterState is similar to RouteStateSnapshot, except that it represents the state of the router changing over time.<\/p>\n

RouterStateSnapshot
\ninterface RouterStateSnapshot {
\nroot: ActivatedRouteSnapshot;
\n}<\/p>\n

interface ActivatedRouteSnapshot {
\nurl: UrlSegment[];
\nparams: {[name:string]:string};
\ndata: {[name:string]:any};<\/p>\n

queryParams: {[name:string]:string};
\nfragment: string;<\/p>\n

root: ActivatedRouteSnapshot;
\nparent: ActivatedRouteSnapshot;
\nfirstchild: ActivatedRouteSnapshot;
\nchildren: ActivatedRouteSnapshot[];
\n}<\/p>\n

As you can see RouterStateSnapshot is a tree of activated route snapshots. Every node in this tree knows about the \u201cconsumed\u201d URL segments, the extracted parameters, and the resolved data. To make it clearer, let\u2019s look at this example:<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n