Справочник по маршрутизаторам

28.02.2022

В следующих разделах рассматриваются некоторые основные концепции маршрутизаторов.

Импорт маршрутизатора

Angular Router — это дополнительный сервис, который представляет определенный вид компонента для заданного URL. Он не является частью ядра Angular и поэтому находится в собственном библиотечном пакете @angular/router.

Импортируйте из него то, что вам нужно, как и из любого другого пакета Angular.

import { RouterModule, Routes } from '@angular/router';

Подробнее о стилях URL браузера смотрите LocationStrategy и стили URL браузера.

Конфигурация

Маршрутизируемое приложение Angular имеет один экземпляр сервиса Router. Когда URL браузера изменяется, маршрутизатор ищет соответствующий Route, на основе которого он может определить компонент для отображения.

Маршрутизатор не имеет маршрутов, пока вы его не настроите. Следующий пример создает пять определений маршрутов, настраивает маршрутизатор с помощью метода RouterModule.forRoot() и добавляет результат в массив imports модуля AppModule.

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    { path: 'hero/:id', component: HeroDetailComponent },
    {
        path: 'heroes',
        component: HeroListComponent,
        data: { title: 'Heroes List' },
    },
    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: true } // <-- debugging purposes only
        ),
        // other imports here
    ],
    /* ... */
})
export class AppModule {}

Массив маршрутов appRoutes описывает способы навигации. Передайте его в метод RouterModule.forRoot() в модуле imports для настройки маршрутизатора.

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

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

:id во втором маршруте является маркером для параметра маршрута. В URL, таком как /hero/42, "42" является значением параметра id.

Соответствующий компонент HeroDetailComponent использует это значение для поиска и представления героя, чей id равен 42.

Свойство data в третьем маршруте — это место для хранения произвольных данных, связанных с этим конкретным маршрутом. Свойство data доступно в каждом активированном маршруте.

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

Для получения динамических данных используйте resolve guard.

Пустой путь в четвертом маршруте представляет собой путь по умолчанию для приложения — место, куда следует перейти, когда путь в URL пуст, как это обычно бывает в начале. Этот маршрут по умолчанию перенаправляет на маршрут для URL /heroes и, следовательно, отображает компонент HeroesListComponent.

Если вам нужно посмотреть, какие события происходят во время жизненного цикла навигации, в конфигурации маршрутизатора по умолчанию есть опция enableTracing. Она выводит в консоль браузера каждое событие маршрутизатора, произошедшее во время каждого жизненного цикла навигации.

Используйте enableTracing только в целях отладки.

Вы устанавливаете опцию enableTracing: true в объекте, передаваемом в качестве второго аргумента методу RouterModule.forRoot().

Выход маршрутизатора

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

<router-outlet></router-outlet>
<!-- Routed components go here -->

Учитывая предыдущую конфигурацию, когда URL браузера для этого приложения становится /heroes, маршрутизатор сопоставляет этот URL с маршрутным путем /heroes и отображает HeroListComponent в качестве дочернего элемента RouterOutlet, который вы поместили в шаблон главного компонента.

Ссылки маршрутизатора

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

Рассмотрим следующий шаблон:

<h1>Angular Router</h1>
<nav>
    <a
        routerLink="/crisis-center"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        >Crisis Center</a
    >
    <a
        routerLink="/heroes"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        >Heroes</a
    >
</nav>
<router-outlet></router-outlet>

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

Если бы путь навигации был более динамичным, можно было бы привязать к выражению шаблона, возвращающему массив параметров ссылки маршрута; то есть, массив link parameters array. Маршрутизатор преобразует этот массив в полный URL.

Активные ссылки маршрутизатора

Директива RouterLinkActive переключает классы CSS для активных привязок RouterLink на основе текущего RouterState.

В каждом теге якоря вы видите привязку свойства к директиве RouterLinkActive, которая выглядит следующим образом

routerLinkActive="..."

Шаблонное выражение справа от знака равенства = содержит ограниченную пробелами строку CSS-классов, которые маршрутизатор добавляет, когда эта ссылка активна, и удаляет, когда ссылка неактивна. Вы устанавливаете директиву RouterLinkActive в строку классов, например routerLinkActive="active fluffy", или связываете ее со свойством компонента, которое возвращает такую строку.

Например,

[routerLinkActive]="someStringProperty"

Активные ссылки маршрута каскадируют вниз через каждый уровень дерева маршрутов, поэтому родительские и дочерние ссылки маршрутизатора могут быть активны одновременно. Чтобы отменить это поведение, привяжитесь к входной привязке [routerLinkActiveOptions] с помощью выражения { exact: true }.

При использовании { exact: true }, данная RouterLink будет активна только в том случае, если ее URL точно совпадает с текущим URL.

RouterLinkActive также позволяет легко применить атрибут aria-current к активному элементу, обеспечивая тем самым более доступный опыт для всех пользователей. Для получения дополнительной информации см. раздел Accessibility Best Practices Active links identification section.

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

После завершения каждого успешного жизненного цикла навигации маршрутизатор строит дерево объектов ActivatedRoute, которые составляют текущее состояние маршрутизатора. Вы можете получить доступ к текущему RouterState из любой точки приложения, используя службу Router и свойство routerState.

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

Активированный маршрут

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

Собственность	Детали
url	Объект маршрута, представленный в виде массива строк для каждой части маршрута.
data	Observable, содержащий объект data, предоставленный для маршрута. Также содержит любые разрешенные значения из resolve guard.
params	Observable, который содержит необходимые и необязательные параметры, специфичные для маршрута.
paramMap	Observable, которая содержит карту необходимых и необязательных параметров, специфичных для маршрута. Карта поддерживает получение одного или нескольких значений одного и того же параметра.
queryParamMap	Observable, которая содержит карту параметров запроса, доступных для всех маршрутов. Карта поддерживает получение одного или нескольких значений из параметра запроса.
queryParams	Observable, содержащий параметры запроса, доступные для всех маршрутов.
fragment	Observable URL фрагмент, доступный всем маршрутам.
outlet	Имя RouterOutlet, используемого для отображения маршрута. Для неименованного аутлета имя аутлета является основным.
routeConfig	Конфигурация маршрута, используемая для маршрута, содержащая путь к источнику.
parent	Родитель маршрута ActivatedRoute, если этот маршрут является дочерним маршрутом.
firstChild	Содержит первый ActivatedRoute в списке дочерних маршрутов этого маршрута.
children	Содержит все дочерние маршруты, активированные под текущим маршрутом.

События маршрутизатора

Во время каждой навигации Router издает навигационные события через свойство Router.events. Эти события показаны в следующей таблице.

Маршрутное событие	Подробности
NavigationStart	Срабатывает, когда начинается навигация.
RouteConfigLoadStart	Срабатывает перед тем, как маршрутизатор лениво загружает конфигурацию маршрута.
RouteConfigLoadEnd	Срабатывает после ленивой загрузки маршрута.
RoutesRecognized	Срабатывает, когда маршрутизатор анализирует URL и маршруты распознаны.
GuardsCheckStart	Срабатывает, когда маршрутизатор начинает фазу Guards в маршрутизации.
ChildActivationStart	Срабатывает, когда маршрутизатор начинает активировать дочерние маршруты.
ActivationStart	Срабатывает, когда маршрутизатор начинает активировать маршрут.
GuardsCheckEnd	Срабатывает, когда маршрутизатор успешно завершает фазу Guards в маршрутизации.
ResolveStart	Срабатывает, когда маршрутизатор начинает фазу Resolve маршрутизации.
ResolveEnd	Срабатывает, когда маршрутизатор успешно завершает фазу Resolve маршрутизации.
ChildActivationEnd	Срабатывает, когда маршрутизатор завершает активацию дочерних элементов маршрута.
ActivationEnd	Срабатывает, когда маршрутизатор завершает активацию маршрута.
NavigationEnd	Срабатывает при успешном завершении навигации.
NavigationCancel	Срабатывает при отмене навигации. Это может произойти, когда Route Guard возвращает false во время навигации, или перенаправляет, возвращая UrlTree.
NavigationError	Срабатывает, когда навигация не удалась из-за непредвиденной ошибки.
Scroll	Представляет событие прокрутки.

Когда вы включаете опцию enableTracing, Angular записывает эти события в консоль. Пример фильтрации событий навигации по маршрутизатору см. в разделе router руководства Observables in Angular.

Терминология маршрутизатора

Здесь приведены ключевые термины Router и их значения:

Часть маршрутизатора	Детали
Router	Отображает компонент приложения для активного URL. Управляет навигацией от одного компонента к другому.
RouterModule	Отдельный NgModule, который предоставляет необходимые поставщики услуг и директивы для навигации по представлениям приложения.
Routes	Определяет массив маршрутов, каждый из которых отображает путь URL к компоненту.
Route	Определяет, как маршрутизатор должен переходить к компоненту на основе шаблона URL. Большинство маршрутов состоит из пути и типа компонента.
RouterOutlet	Директива (<router-outlet>), которая отмечает, где маршрутизатор отображает представление.
RouterLink	Директива для привязки кликабельного HTML-элемента к маршруту. Щелчок по элементу с директивой routerLink, привязанному к строке или массиву параметров ссылки, вызывает навигацию.
RouterLinkActive	Директива для добавления/удаления классов из HTML-элемента, когда связанная с ним routerLink, содержащаяся на элементе или внутри него, становится активной/неактивной. Она также может устанавливать aria-current активной ссылки для лучшей доступности.
ActivatedRoute	Служба, предоставляемая каждому компоненту маршрута, которая содержит специфическую для маршрута информацию, такую как параметры маршрута, статические данные, данные разрешения, глобальные параметры запроса и глобальный фрагмент.
RouterState	Текущее состояние маршрутизатора, включающее дерево активированных в данный момент маршрутов вместе с удобными методами для обхода дерева маршрутов.
Массив параметров ссылки	Массив, который маршрутизатор интерпретирует как инструкцию маршрутизации. Вы можете связать этот массив с RouterLink или передать массив в качестве аргумента методу Router.navigate.
Компонент маршрутизации	Компонент Angular с RouterOutlet, который отображает представления на основе навигации маршрутизатора.

Комментарии