W3cubDocs

/Angular

ActivatedRouteSnapshot

class final

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
  title: string | undefined
  url: UrlSegment[]
  params: Params
  queryParams: Params
  fragment: string | null
  data: Data
  outlet: string
  component: Type<any> | 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;
  }
}

Properties

Property Description
routeConfig: Route | null Read-Only

The configuration used to match this route *

title: string | undefined Read-Only

The resolved route title

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 | null

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<any> | null

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–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/router/ActivatedRouteSnapshot