Определение маршрутов

Маршруты — это основные строительные блоки навигации в приложении Angular.

Что такое маршруты?

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

Ниже приведён простой пример маршрута:

import {AdminPage} from './app-admin';

const adminPage = {
  path: 'admin',
  component: AdminPage,
};

Для этого маршрута при переходе пользователя по пути /admin приложение отобразит компонент AdminPage.

Управление маршрутами в приложении

В большинстве проектов маршруты определены в отдельном файле, в имени которого содержится routes.

Коллекция маршрутов выглядит так:

import {Routes} from '@angular/router';
import {HomePage} from './home-page';
import {AdminPage} from './about-page';

export const routes: Routes = [
  {
    path: '',
    component: HomePage,
  },
  {
    path: 'admin',
    component: AdminPage,
  },
];

Совет: если вы создали проект с помощью Angular CLI, маршруты определены в src/app/app.routes.ts.

Добавление маршрутизатора в приложение

При запуске приложения Angular без Angular CLI можно передать объект конфигурации, включающий массив providers.

В массиве providers можно добавить маршрутизатор Angular в приложение, вызвав функцию provideRouter и передав ей маршруты.

import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // ...
  ],
};

Пути URL маршрутов

Статические пути URL

Статические пути URL — это маршруты с заранее заданными путями, которые не меняются в зависимости от динамических параметров. Они точно соответствуют строке path и приводят к фиксированному результату.

Примеры таких путей:

• "/admin"
• "/blog"
• "/settings/account"

Определение путей URL с параметрами маршрута

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

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

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

import {Routes} from '@angular/router';
import {UserProfile} from './user-profile/user-profile';

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

В этом примере URL, такие как /user/leeroy и /user/jenkins, отображают компонент UserProfile. Затем компонент может прочитать параметр id и использовать его для выполнения дополнительных действий, например получения данных. Подробные сведения о чтении параметров маршрута см. в руководстве по чтению состояния маршрута.

Допустимые имена параметров маршрута должны начинаться с буквы (a–z, A–Z) и могут содержать только:

• Буквы (a–z, A–Z)
• Цифры (0–9)
• Подчёркивание (_)
• Дефис (-)

Также можно определить пути с несколькими параметрами:

import {Routes} from '@angular/router';
import {UserProfile} from './user-profile';
import {SocialMediaFeed} from './social-media-feed';

const routes: Routes = [
  {path: 'user/:id/:social-media', component: SocialMediaFeed},
  {path: 'user/:id/', component: UserProfile},
];

С этим новым путём пользователи могут перейти по адресам /user/leeroy/youtube и /user/leeroy/bluesky и увидеть соответствующие ленты социальных сетей на основе параметра для пользователя leeroy.

Подробные сведения о чтении параметров маршрута см. в разделе Чтение состояния маршрута.

Маски

Если нужно перехватывать все маршруты для определённого пути, используйте маршрут-маску, который задаётся двумя звёздочками (**).

Распространённый пример — определение компонента страницы «Не найдено».

import {Home} from './home/home';
import {UserProfile} from './user-profile';
import {NotFound} from './not-found';

const routes: Routes = [
  {path: 'home', component: Home},
  {path: 'user/:id', component: UserProfile},
  {path: '**', component: NotFound},
];

В этом массиве маршрутов приложение отображает компонент NotFound, когда пользователь переходит по любому пути, кроме home и user/:id.

Совет: маршруты-маски обычно размещают в конце массива маршрутов.

Как Angular сопоставляет URL

При определении маршрутов порядок имеет значение, поскольку Angular использует стратегию «первое совпадение». Это означает, что после сопоставления URL с шаблоном маршрута path Angular прекращает проверку остальных маршрутов. Поэтому всегда размещайте более конкретные маршруты перед менее конкретными.

В следующем примере маршруты расположены от наиболее конкретного к наименее конкретному:

const routes: Routes = [
  {path: '', component: Home}, // Empty path
  {path: 'users/new', component: NewUser}, // Static, most specific
  {path: 'users/:id', component: UserDetail}, // Dynamic
  {path: 'users', component: Users}, // Static, less specific
  {path: '**', component: NotFound}, // Wildcard - always last
];

Если пользователь перейдёт по адресу /users/new, маршрутизатор Angular выполнит следующие действия:

1. Проверит '' — совпадения нет
2. Проверит users/new — совпадение найдено! Проверка прекращается
3. Не дойдёт до users/:id, хотя этот маршрут тоже мог бы подойти
4. Не дойдёт до users
5. Не дойдёт до **

Перенаправления

Можно определить маршрут, который перенаправляет на другой маршрут, а не отображает компонент:

import {Blog} from './home/blog';

const routes: Routes = [
  {
    path: 'articles',
    redirectTo: '/blog',
  },
  {
    path: 'blog',
    component: Blog,
  },
];

Если вы измените или удалите маршрут, некоторые пользователи могут по-прежнему переходить по устаревшим ссылкам или закладкам на этот маршрут. Можно добавить перенаправление, чтобы направить таких пользователей на подходящий альтернативный маршрут, а не на страницу «Не найдено».

Заголовки страниц

Каждому маршруту можно назначить заголовок. При активации маршрута Angular автоматически обновляет заголовок страницы. Всегда задавайте подходящие заголовки страниц для приложения: они необходимы для обеспечения доступности.

import {Routes} from '@angular/router';
import {Home} from './home';
import {About} from './about';
import {Products} from './products';

const routes: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home Page',
  },
  {
    path: 'about',
    component: About,
    title: 'About Us',
  },
];

Свойству страницы title можно динамически назначить функцию-резолвер с помощью ResolveFn.

const titleResolver: ResolveFn<string> = (route) => route.queryParams['id'];
const routes: Routes = [
  ...{
    path: 'products',
    component: Products,
    title: titleResolver,
  },
];

Заголовки маршрутов также можно задавать с помощью сервиса, расширяющего абстрактный класс TitleStrategy. По умолчанию Angular использует DefaultTitleStrategy.

Использование TitleStrategy для заголовков страниц

Для более сложных сценариев, в которых требуется централизованно управлять формированием заголовка документа, реализуйте TitleStrategy.

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

import {inject, Injectable} from '@angular/core';
import {Title} from '@angular/platform-browser';
import {TitleStrategy, RouterStateSnapshot} from '@angular/router';

@Injectable()
export class AppTitleStrategy extends TitleStrategy {
  private readonly title = inject(Title);

  updateTitle(snapshot: RouterStateSnapshot): void {
    // PageTitle is equal to the "Title" of a route if it's set
    // If its not set it will use the "title" given in index.html
    const pageTitle = this.buildTitle(snapshot) || this.title.getTitle();
    this.title.setTitle(`MyAwesomeApp - ${pageTitle}`);
  }
}

Чтобы использовать пользовательскую стратегию, предоставьте её с помощью токена TitleStrategy на уровне приложения:

import {provideRouter, TitleStrategy} from '@angular/router';
import {AppTitleStrategy} from './app-title.strategy';

export const appConfig = {
  providers: [provideRouter(routes), {provide: TitleStrategy, useClass: AppTitleStrategy}],
};

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

У каждого маршрута есть свойство providers, позволяющее предоставлять зависимости содержимому этого маршрута с помощью внедрения зависимостей.

Это может быть полезно, например, в приложениях, где используются разные сервисы в зависимости от того, является ли пользователь администратором.

export const ROUTES: Route[] = [
  {
    path: 'admin',
    providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}],
    children: [
      {path: 'users', component: AdminUsers},
      {path: 'teams', component: AdminTeams},
    ],
  },
  // ... other application routes that don't
  //     have access to ADMIN_API_KEY or AdminService.
];

В этом примере кода путь admin содержит защищённое свойство данных ADMIN_API_KEY, доступное только дочерним элементам в этом разделе. Поэтому никакие другие пути не смогут получить доступ к данным, предоставленным через ADMIN_API_KEY.

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

Связывание данных с маршрутами

Данные маршрута позволяют прикреплять к маршрутам дополнительную информацию. На основе этих данных можно настраивать поведение компонентов.

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

Статические данные

К маршруту можно прикрепить произвольные статические данные с помощью свойства data, чтобы централизовать, например, метаданные, относящиеся к маршруту (аналитику, разрешения и т. д.):

import {Routes} from '@angular/router';
import {Home} from './home';
import {About} from './about';
import {Products} from './products';

const routes: Routes = [
  {
    path: 'about',
    component: About,
    data: {analyticsId: '456'},
  },
  {
    path: '',
    component: Home,
    data: {analyticsId: '123'},
  },
];

В этом примере кода для главной страницы и страницы «О нас» настроены отдельные значения analyticsId, которые затем используются в соответствующих компонентах для аналитики отслеживания страниц.

Прочитать эти статические данные можно, внедрив ActivatedRoute. Подробные сведения см. в разделе Чтение состояния маршрута.

Динамические данные с помощью резолверов данных

Если необходимо предоставить маршруту динамические данные, ознакомьтесь с руководством по резолверам данных маршрута.

Вложенные маршруты

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

Дочерние маршруты можно добавить в любое определение маршрута с помощью свойства children:

const routes: Routes = [
  {
    path: 'product/:id',
    component: Product,
    children: [
      {
        path: 'info',
        component: ProductInfo,
      },
      {
        path: 'reviews',
        component: ProductReviews,
      },
    ],
  },
];

В приведённом выше примере определяется маршрут страницы товара, позволяющий пользователю выбирать, отображать ли информацию о товаре или отзывы, в зависимости от URL.

Свойство children принимает массив объектов Route.

Чтобы отображать дочерние маршруты, родительский компонент (Product в примере выше) должен содержать собственный <router-outlet>.

<!-- Product -->
<article>
  <h1>Product {{ id }}</h1>
  <router-outlet />
</article>

После добавления дочерних маршрутов в конфигурацию и добавления <router-outlet> в компонент переходы между URL, соответствующими дочерним маршрутам, обновляют только вложенную точку выхода.

Дальнейшие шаги