ActivatedRoute — Angular

Предоставляет доступ к информации о маршруте, связанном с компонентом, загруженным в outlet. Используется для обхода дерева RouterState и извлечения информации из узлов.

API

class ActivatedRoute {
  constructor(urlSubject: BehaviorSubject<UrlSegment[]>, paramsSubject: BehaviorSubject<Params>, queryParamsSubject: BehaviorSubject<Params>, fragmentSubject: BehaviorSubject<string | null>, dataSubject: BehaviorSubject<Data>, outlet: string, component: Type<any> | null, futureSnapshot: ActivatedRouteSnapshot): ActivatedRoute;
  snapshot: ActivatedRouteSnapshot;
  readonly title: Observable<string | undefined>;
  url: Observable<UrlSegment[]>;
  params: Observable<Params>;
  queryParams: Observable<Params>;
  fragment: Observable<string | null>;
  data: Observable<Data>;
  override outlet: string;
  override component: Type<any> | null;
  readonly routeConfig: Route | null;
  readonly root: ActivatedRoute;
  readonly parent: ActivatedRoute | null;
  readonly firstChild: ActivatedRoute | null;
  readonly children: ActivatedRoute[];
  readonly pathFromRoot: ActivatedRoute[];
  readonly paramMap: Observable<ParamMap>;
  readonly queryParamMap: Observable<ParamMap>;
  toString(): string;
}

constructor

ActivatedRoute

@paramurlSubjectBehaviorSubject<UrlSegment[]>

@paramparamsSubjectBehaviorSubject<Params>

@paramqueryParamsSubjectBehaviorSubject<Params>

@paramfragmentSubjectBehaviorSubject<string | null>

@paramdataSubjectBehaviorSubject<Data>

@paramoutletstring

Имя outlet маршрута, константа.

@paramcomponentType<any> | null

Компонент маршрута, константа.

@paramfutureSnapshotActivatedRouteSnapshot

@returnsActivatedRoute

snapshot

ActivatedRouteSnapshot

Текущий снимок этого маршрута

title

Observable<string | undefined>

Observable с разрешённым заголовком маршрута

url

Observable<UrlSegment[]>

Observable сегментов URL, сопоставленных этим маршрутом.

params

Observable<Params>

Observable матричных параметров, относящихся к этому маршруту.

queryParams

Observable<Params>

Observable параметров запроса, общих для всех маршрутов.

fragment

Observable<string | null>

Observable фрагмента URL, общего для всех маршрутов.

data

Observable<Data>

Observable статических и разрешённых данных этого маршрута.

outlet

string

Имя outlet маршрута, константа.

component

Type<any> | null

Компонент маршрута, константа.

routeConfig

Route | null

Конфигурация, использованная для сопоставления этого маршрута.

root

ActivatedRoute

Корень состояния маршрутизатора.

parent

ActivatedRoute | null

Родительский маршрут в дереве состояния маршрутизатора.

firstChild

ActivatedRoute | null

Первый дочерний маршрут в дереве состояния маршрутизатора.

children

ActivatedRoute[]

Дочерние маршруты в дереве состояния маршрутизатора.

pathFromRoot

ActivatedRoute[]

Путь от корня дерева состояния маршрутизатора до этого маршрута.

paramMap

Observable<ParamMap>

Observable, содержащий карту обязательных и необязательных параметров, относящихся к этому маршруту. Карта позволяет получать одно или несколько значений одного и того же параметра.

queryParamMap

Observable<ParamMap>

Observable, содержащий карту параметров запроса, доступных всем маршрутам. Карта позволяет получать одно или несколько значений параметра запроса.

toString

string

@returnsstring

Описание

В следующем примере показано, как создать компонент, используя информацию из текущего активированного маршрута.

Примечание: observables этого класса выдают значения, только если текущие и предыдущие значения различаются при сравнении на поверхностное равенство. Например, изменение глубоко вложенных свойств в разрешённых данных data не приведёт к тому, что Observable ActivatedRoute.data выдаст новое значение.

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']));
  }
}