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

28.02.2022

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

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

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

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

1

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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 — это директива из библиотеки маршрутизатора, которая используется подобно компоненту. Она действует как заполнитель, который отмечает место в шаблоне, где маршрутизатор должен отображать компоненты для данного аутлета.

1
2

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<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, которая выглядит следующим образом

1

routerLinkActive="..."

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

Например,

1

[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. Он содержит много полезной информации, включая:

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

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

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

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

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

Комментарии