ActivatedRouteSnapshot

From Get docs
< @angular/routerAngular/docs/11/api/router/activatedroutesnapshot


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 Type The component of the route
routeConfig Route
urlSegment UrlSegmentGroup
lastPathIndex number
resolve ResolveData


Properties

Property Description
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

string | null

Declared in Constructor The component of the route

root: ActivatedRouteSnapshot

Read-Only The root of the router state

null

Read-Only The parent of this route in the router state tree

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