ActivatedRouteSnapshot — Angular

Содержит информацию о маршруте, связанном с компонентом, загруженным в outlet в определённый момент времени. ActivatedRouteSnapshot также можно использовать для обхода дерева состояния маршрутизатора.

API

class ActivatedRouteSnapshot {
  constructor(url: UrlSegment[], params: Params, queryParams: Params, fragment: string | null, data: Data, outlet: string, component: Type<any> | null, routeConfig: Route | null, resolve: ResolveData, environmentInjector: EnvironmentInjector): ActivatedRouteSnapshot;
  readonly routeConfig: Route | null;
  readonly title: string | undefined;
  override url: UrlSegment[];
  override params: Params;
  override queryParams: Params;
  override fragment: string | null;
  override data: Data;
  override outlet: string;
  override component: Type<any> | null;
  readonly root: ActivatedRouteSnapshot;
  readonly parent: ActivatedRouteSnapshot | null;
  readonly firstChild: ActivatedRouteSnapshot | null;
  readonly children: ActivatedRouteSnapshot[];
  readonly pathFromRoot: ActivatedRouteSnapshot[];
  readonly paramMap: ParamMap;
  readonly queryParamMap: ParamMap;
  toString(): string;
}

constructor

ActivatedRouteSnapshot

@paramurlUrlSegment[]

Сегменты URL, соответствующие этому маршруту

@paramparamsParams

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

Вы можете получить все параметры (или данные) из состояния маршрутизатора либо получить параметры вне активированного компонента, выполнив обход дерева RouterState, как показано в следующем примере:

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;
}

@paramqueryParamsParams

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

@paramfragmentstring | null

Фрагмент URL, общий для всех маршрутов

@paramdataData

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

@paramoutletstring

Имя outlet маршрута

@paramcomponentType<any> | null

Компонент маршрута

@paramrouteConfigRoute | null

@paramresolveResolveData

@paramenvironmentInjectorEnvironmentInjector

@returnsActivatedRouteSnapshot

routeConfig

Route | null

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

title

string | undefined

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

url

UrlSegment[]

Сегменты URL, соответствующие этому маршруту

params

Params

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

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

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

fragment

string | null

Фрагмент URL, общий для всех маршрутов

data

Data

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

outlet

string

Имя outlet маршрута

component

Type<any> | null

Компонент маршрута

root

ActivatedRouteSnapshot

parent

ActivatedRouteSnapshot | null

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

firstChild

ActivatedRouteSnapshot | null

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

children

ActivatedRouteSnapshot[]

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

pathFromRoot

ActivatedRouteSnapshot[]

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

paramMap

ParamMap

queryParamMap

ParamMap

toString

string

@returnsstring

Описание

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

@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;
  }
}