Чтение состояния маршрута

Angular Router позволяет читать и использовать информацию, связанную с маршрутом, чтобы создавать адаптивные компоненты, учитывающие контекст.

Получение информации о текущем маршруте с помощью ActivatedRoute

ActivatedRoute — это сервис из @angular/router, который предоставляет всю информацию, связанную с текущим маршрутом.

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product',
})
export class Product {
  private activatedRoute = inject(ActivatedRoute);

  constructor() {
    console.log(this.activatedRoute);
  }
}

ActivatedRoute может предоставлять различную информацию о маршруте. Вот некоторые распространённые свойства:

Полный список данных, доступных в маршруте, см. в документации API ActivatedRoute.

Понимание снимков маршрута

Переходы между страницами — это события, происходящие во времени. Чтобы получить состояние маршрутизатора в определённый момент, можно запросить снимок маршрута.

Снимки маршрута содержат важную информацию о маршруте, включая его параметры, данные и дочерние маршруты. Кроме того, снимки статичны и не отражают будущие изменения.

Вот пример получения снимка маршрута:

import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';

@Component({
  /*...*/
})
export class UserProfile {
  readonly userId: string;
  private route = inject(ActivatedRoute);

  constructor() {
    // Example URL: https://www.angular.dev/users/123?role=admin&status=active#contact

    // Access route parameters from snapshot
    this.userId = this.route.snapshot.paramMap.get('id');

    // Access multiple route elements
    const snapshot = this.route.snapshot;
    console.log({
      url: snapshot.url, // https://www.angular.dev
      // Route parameters object: {id: '123'}
      params: snapshot.params,
      // Query parameters object: {role: 'admin', status: 'active'}
      queryParams: snapshot.queryParams, // Query parameters
    });
  }
}

Полный список доступных свойств см. в документации API ActivatedRoute и ActivatedRouteSnapshot.

Чтение параметров маршрута

В маршруте можно использовать два типа параметров: параметры маршрута и параметры запроса.

Параметры маршрута

Параметры маршрута позволяют передавать данные компоненту через URL. Это полезно, когда нужно отображать определённое содержимое на основе идентификатора в URL, например идентификатора пользователя или товара.

Вы можете определить параметры маршрута, добавив двоеточие перед именем параметра (:).

import {Routes} from '@angular/router';
import {Product} from './product';

const routes: Routes = [{path: 'product/:id', component: Product}];

Получить доступ к параметрам можно, подписавшись на route.params.

import {Component, inject, signal} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product-detail',
  template: `<h1>Product Details: {{ productId() }}</h1>`,
})
export class ProductDetail {
  productId = signal('');
  private activatedRoute = inject(ActivatedRoute);

  constructor() {
    // Access route parameters
    this.activatedRoute.params.subscribe((params) => {
      this.productId.set(params['id']);
    });
  }
}

Параметры запроса

Параметры запроса позволяют гибко передавать необязательные данные через URL, не изменяя структуру маршрута. В отличие от параметров маршрута, параметры запроса могут сохраняться при переходах и отлично подходят для фильтрации, сортировки, постраничной навигации и других элементов интерфейса с состоянием.

// Single parameter structure
// /products?category=electronics
router.navigate(['/products'], {
  queryParams: {category: 'electronics'},
});

// Multiple parameters
// /products?category=electronics&sort=price&page=1
router.navigate(['/products'], {
  queryParams: {
    category: 'electronics',
    sort: 'price',
    page: 1,
  },
});

Получить доступ к параметрам запроса можно с помощью route.queryParams.

Ниже приведён пример ProductList, который обновляет параметры запроса, влияющие на отображение списка товаров:

import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'app-product-list',
  template: `
    <div>
      <select (change)="updateSort($event)">
        <option value="price">Price</option>
        <option value="name">Name</option>
      </select>
      <!-- Products list -->
    </div>
  `,
})
export class ProductList {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  constructor() {
    // Access query parameters reactively
    this.route.queryParams.subscribe((params) => {
      const sort = params['sort'] || 'price';
      const page = Number(params['page']) || 1;
      this.loadProducts(sort, page);
    });
  }

  updateSort(event: Event) {
    const sort = (event.target as HTMLSelectElement).value;
    // Update URL with new query parameter
    this.router.navigate([], {
      queryParams: {sort},
      queryParamsHandling: 'merge', // Preserve other query parameters
    });
  }
}

В этом примере пользователи могут выбрать, сортировать список товаров по имени или цене. Связанный с этим обработчик изменения обновляет параметры запроса в URL, что вызывает событие изменения. Обработчик может прочитать обновлённые параметры запроса и обновить список товаров.

Дополнительную информацию см. в официальной документации по QueryParamsHandling.

Матричные параметры

Матричные параметры — это необязательные параметры, относящиеся к определённому сегменту URL, а не ко всему маршруту. В отличие от параметров запроса, которые указываются после ? и применяются глобально, матричные параметры используют точку с запятой (;) и относятся к отдельным сегментам пути.

Матричные параметры полезны, когда нужно передать вспомогательные данные определённому сегменту маршрута, не влияя на определение маршрута или сопоставление. Как и параметры запроса, их не нужно определять в конфигурации маршрутов.

// URL format: /path;key=value
// Multiple parameters: /path;key1=value1;key2=value2

// Navigate with matrix parameters
this.router.navigate(['/awesome-products', {view: 'grid', filter: 'new'}]);
// Results in URL: /awesome-products;view=grid;filter=new

Использование ActivatedRoute

import {Component, inject} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component(/* ... */)
export class AwesomeProducts {
  private route = inject(ActivatedRoute);

  constructor() {
    // Access matrix parameters via params
    this.route.params.subscribe((params) => {
      const view = params['view']; // e.g., 'grid'
      const filter = params['filter']; // e.g., 'new'
    });
  }
}

Определение активного текущего маршрута с помощью RouterLinkActive

Директива RouterLinkActive позволяет динамически задавать стиль элементов навигации в зависимости от текущего активного маршрута. Это часто используется в навигации, чтобы показывать пользователям, какой маршрут активен.

<nav>
  <a
    class="button"
    routerLink="/about"
    routerLinkActive="active-button"
    ariaCurrentWhenActive="page"
  >
    About
  </a>
  |
  <a
    class="button"
    routerLink="/settings"
    routerLinkActive="active-button"
    ariaCurrentWhenActive="page"
  >
    Settings
  </a>
</nav>

В этом примере Angular Router применит класс active-button к нужной ссылке-якорю и ariaCurrentWhenActive к page, когда URL будет соответствовать соответствующему routerLink.

Если нужно добавить к элементу несколько классов, можно использовать строку с разделителями-пробелами или массив:

<!-- Space-separated string syntax -->
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>

<!-- Array syntax -->
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

Указывая значение для routerLinkActive, вы также задаёте такое же значение для ariaCurrentWhenActive. Это позволяет пользователям с нарушениями зрения (которые могут не заметить применённые изменения стиля) также определить активную кнопку.

Если нужно задать другое значение aria, его необходимо явно указать с помощью директивы ariaCurrentWhenActive.

Стратегия сопоставления маршрутов

По умолчанию RouterLinkActive считает совпадением любой родительский маршрут.

<a [routerLink]="['/user/jane']" routerLinkActive="active-link"> User </a>
<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link"> Role </a>

Когда пользователь переходит по адресу /user/jane/role/admin, оба элемента ссылок получат класс active-link.

Применение RouterLinkActive только при точном совпадении маршрута

Если нужно применить класс только при точном совпадении, передайте директиве routerLinkActiveOptions объект конфигурации со значением exact: true.

<a
  [routerLink]="['/user/jane']"
  routerLinkActive="active-link"
  [routerLinkActiveOptions]="{exact: true}"
>
  User
</a>
<a
  [routerLink]="['/user/jane/role/admin']"
  routerLinkActive="active-link"
  [routerLinkActiveOptions]="{exact: true}"
>
  Role
</a>

Если нужно точнее определить правила сопоставления маршрута, следует учитывать, что exact: true — это синтаксический сахар для полного набора параметров сопоставления:

// `exact: true` is equivalent to
{
  paths: 'exact',
  fragment: 'ignored',
  matrixParams: 'ignored',
  queryParams: 'exact',
}

// `exact: false` is equivalent
{
  paths: 'subset',
  fragment: 'ignored',
  matrixParams: 'ignored',
  queryParams: 'subset',
}

Дополнительную информацию см. в официальной документации по isActiveMatchOptions.

Применение RouterLinkActive к родительскому элементу

Директиву RouterLinkActive также можно применить к родительскому элементу, чтобы разработчики могли задавать стили его элементов по своему усмотрению.

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

Дополнительную информацию см. в документации API по RouterLinkActive.

Проверка активности URL

Функция isActive возвращает вычисляемый сигнал, отслеживающий, активен ли указанный URL в данный момент в маршрутизаторе. Сигнал автоматически обновляется при изменении состояния маршрутизатора.

import {Component, inject} from '@angular/core';
import {isActive, Router} from '@angular/router';

@Component({
  template: `
    <div [class.active]="isSettingsActive()">
      <h2>Settings</h2>
    </div>
  `,
})
export class Panel {
  private router = inject(Router);

  isSettingsActive = isActive('/settings', this.router, {
    paths: 'subset',
    queryParams: 'ignored',
    fragment: 'ignored',
    matrixParams: 'ignored',
  });
}