W3cubDocs

/Angular 11

ActivatedRouteSnapshot

class

Contains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.

See more...

class ActivatedRouteSnapshot {
  routeConfig: Route | null
  url: UrlSegment[]
  params: Params
  queryParams: Params
  fragment: string
  data: Data
  outlet: string
  component: Type<any> | string | null
  root: ActivatedRouteSnapshot
  parent: ActivatedRouteSnapshot | null
  firstChild: ActivatedRouteSnapshot | null
  children: ActivatedRouteSnapshot[]
  pathFromRoot: ActivatedRouteSnapshot[]
  paramMap: ParamMap
  queryParamMap: ParamMap
  toString(): string
}

Description

The following example initializes a component with route information extracted from the snapshot of the root node at the time of creation.

@Component({templateUrl:'./my-component.html'})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;
    const url: string = route.snapshot.url.join('');
    const user = route.snapshot.data.user;
  }
}

Constructor

constructor(url: UrlSegment[], params: Params, queryParams: Params, fragment: string, data: Data, outlet: string, component: string | Type<any>, routeConfig: Route, urlSegment: UrlSegmentGroup, lastPathIndex: number, resolve: ResolveData)

Parameters
url UrlSegment[]

The URL segments matched by this route

params Params

The matrix parameters scoped to this route.

You can compute all params (or data) in the router state or to get params outside of an activated component by traversing the RouterState tree as in the following example:

collectRouteParams(router: Router) {
  let params = {};
  let stack: ActivatedRouteSnapshot[] = [router.routerState.snapshot.root];
  while (stack.length > 0) {
    const route = stack.pop()!;
    params = {...params, ...route.params};
    stack.push(...route.children);
  }
  return params;
}
queryParams Params

The query parameters shared by all the routes

fragment string

The URL fragment shared by all the routes

data Data

The static and resolved data of this route

outlet string

The outlet name of the route

component string | Type

The component of the route

routeConfig Route
urlSegment UrlSegmentGroup
lastPathIndex number
resolve ResolveData

Properties

Property Description
routeConfig: Route | null Read-Only

The configuration used to match this route *

url: UrlSegment[] Declared in Constructor

The URL segments matched by this route

params: Params

The matrix parameters scoped to this route.

You can compute all params (or data) in the router state or to get params outside of an activated component by traversing the RouterState tree as in the following example:

collectRouteParams(router: Router) {
  let params = {};
  let stack: ActivatedRouteSnapshot[] = [router.routerState.snapshot.root];
  while (stack.length > 0) {
    const route = stack.pop()!;
    params = {...params, ...route.params};
    stack.push(...route.children);
  }
  return params;
}
queryParams: Params Declared in Constructor

The query parameters shared by all the routes

fragment: string Declared in Constructor

The URL fragment shared by all the routes

data: Data Declared in Constructor

The static and resolved data of this route

outlet: string Declared in Constructor

The outlet name of the route

component: Type<any> | string | null Declared in Constructor

The component of the route

root: ActivatedRouteSnapshot Read-Only

The root of the router state

parent: ActivatedRouteSnapshot | null Read-Only

The parent of this route in the router state tree

firstChild: ActivatedRouteSnapshot | null Read-Only

The first child of this route in the router state tree

children: ActivatedRouteSnapshot[] Read-Only

The children of this route in the router state tree

pathFromRoot: ActivatedRouteSnapshot[] Read-Only

The path from the root of the router state tree to this route

paramMap: ParamMap Read-Only
queryParamMap: ParamMap Read-Only

Methods

toString(): string

Parameters

There are no parameters.

Returns

string

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/router/ActivatedRouteSnapshot