W3cubDocs

/Angular 12

ActivatedRoute

class final

Provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.

See more...

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

See also

Description

The following example shows how to construct a component using information from a currently activated route.

Note: the observables in this class only emit when the current and previous values differ based on shallow equality. For example, changing deeply nested properties in resolved data will not cause the ActivatedRoute.data Observable to emit a new value.

import {Component} from '@angular/core';
/* . . . */
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
/* . . . */

@Component({
  /* . . . */
})
export class ActivatedRouteComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.pipe(map(p => p.id));
    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
    // route.data includes both `data` and `resolve`
    const user = route.data.pipe(map(d => d.user));
  }
}

Constructor

constructor(url: Observable<UrlSegment[]>, params: Observable<Params>, queryParams: Observable<Params>, fragment: Observable<string>, data: Observable<Data>, outlet: string, component: string | Type<any>, futureSnapshot: ActivatedRouteSnapshot)

Parameters
url Observable

An observable of the URL segments matched by this route.

params Observable

An observable of the matrix parameters scoped to this route.

queryParams Observable

An observable of the query parameters shared by all the routes.

fragment Observable

An observable of the URL fragment shared by all the routes.

data Observable

An observable of the static and resolved data of this route.

outlet string

The outlet name of the route, a constant.

component string | Type

The component of the route, a constant.

futureSnapshot ActivatedRouteSnapshot

Properties

Property Description
snapshot: ActivatedRouteSnapshot

The current snapshot of this route

url: Observable<UrlSegment[]> Declared in Constructor

An observable of the URL segments matched by this route.

params: Observable<Params> Declared in Constructor

An observable of the matrix parameters scoped to this route.

queryParams: Observable<Params> Declared in Constructor

An observable of the query parameters shared by all the routes.

fragment: Observable<string | null> Declared in Constructor

An observable of the URL fragment shared by all the routes.

data: Observable<Data> Declared in Constructor

An observable of the static and resolved data of this route.

outlet: string Declared in Constructor

The outlet name of the route, a constant.

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

The component of the route, a constant.

routeConfig: Route | null Read-Only

The configuration used to match this route.

root: ActivatedRoute Read-Only

The root of the router state.

parent: ActivatedRoute | null Read-Only

The parent of this route in the router state tree.

firstChild: ActivatedRoute | null Read-Only

The first child of this route in the router state tree.

children: ActivatedRoute[] Read-Only

The children of this route in the router state tree.

pathFromRoot: ActivatedRoute[] Read-Only

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

paramMap: Observable<ParamMap> Read-Only

An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

queryParamMap: Observable<ParamMap> Read-Only

An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

Methods

toString(): string

Parameters

There are no parameters.

Returns

string

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