Учебник по маршрутизатору: экскурсия по героям¶

28.02.2022

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

Рабочий пример окончательной версии приложения смотрите в живом примере.

Цели¶

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

• Организация функций приложения в модули
• Переход к компоненту (Герои ссылка на "Список героев")
• Включение параметра маршрута (передача id героя при маршрутизации к "Детали героя")
• Дочерние маршруты (у Кризисного центра есть свои собственные маршруты)
• Страж canActivate (проверка доступа к маршруту)
• Страж canActivateChild (проверка доступа к дочерним маршрутам)
• Страж canDeactivate (запрашивать разрешение на удаление несохраненных изменений)
• Страж resolve (предварительная выборка данных маршрута)
• Ленивая загрузка NgModule
• Страж canMatch (проверка перед загрузкой активов функционального модуля)

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

Для более подробного обзора смотрите учебник Tour of Heroes.

Предварительные условия¶

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

• JavaScript
• HTML
• CSS
• Angular CLI.

Вам может быть полезен учебник Tour of Heroes, но он не обязателен.

Пример приложения в действии¶

Пример приложения для этого учебника помогает Агентству по трудоустройству героев находить кризисы для героев.

Приложение имеет три основные функции:

1. Кризисный центр" для ведения списка кризисов для поручения героям.

2. Область Герои для ведения списка героев, нанятых агентством.

3. Область Админ для управления списком кризисов и героев.

Попробуйте это сделать, щелкнув по этой ссылке.

Приложение отображается с рядом навигационных кнопок и представлением Heroes со списком героев.

Выберите одного героя, и приложение переведет вас на экран редактирования героя.

Измените имя. Нажмите кнопку "Назад", и приложение вернется к списку героев, в котором будет отображаться измененное имя героя. Обратите внимание, что изменение имени вступило в силу немедленно.

Если бы вы нажали кнопку "Назад" браузера, а не кнопку "Назад" приложения, приложение также вернуло бы вас к списку героев. Навигация в приложениях Angular обновляет историю браузера так же, как и обычная веб-навигация.

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

Выберите кризис, и приложение переведет вас на экран редактирования кризиса. На той же странице, под списком, в дочернем компоненте появляется Деталь кризиса.

Измените название кризиса. Обратите внимание, что соответствующее название в списке кризисов не изменяется.

В отличие от Hero Detail, который обновляется по мере ввода текста, изменения в Crisis Detail являются временными, пока вы не сохраните или не отмените их нажатием кнопок "Сохранить" или "Отмена". Обе кнопки позволяют вернуться к Кризисному центру и его списку кризисов.

Нажмите кнопку "Назад" браузера или ссылку "Герои", чтобы активировать диалог.

Вы можете сказать "OK" и потерять свои изменения или нажать "Cancel" и продолжить редактирование.

За этим поведением стоит защита маршрутизатора canDeactivate. Эта защита дает вам шанс очистить или спросить разрешения пользователя, прежде чем переходить от текущего представления.

Кнопки Admin и Login иллюстрируют другие возможности маршрутизатора, которые будут рассмотрены далее в руководстве.

Этап 1: Начало работы¶

Начните с базовой версии приложения, которое перемещается между двумя пустыми представлениями.

Создайте пример приложения¶

1. Создайте новый проект Angular, angular-router-tour-of-heroes.

   1	ng new angular-router-tour-of-heroes

   Когда появится запрос Вы хотите добавить маршрутизацию Angular?, выберите N.

   На вопрос Какой формат таблицы стилей вы хотите использовать? выберите CSS.

   Через несколько мгновений новый проект angular-router-tour-of-heroes будет готов.

2. В терминале перейдите в каталог angular-router-tour-of-heroes.

3. Убедитесь, что ваше новое приложение работает как ожидалось, выполнив команду ng serve.

   1

   ng serve

4. Откройте браузер на http://localhost:4200.

   Вы должны увидеть запущенное приложение в браузере.

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

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

Каждое определение преобразуется в объект Route, который содержит две вещи: path — сегмент пути URL для этого маршрута; и component — компонент, связанный с этим маршрутом.

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

Первый маршрут делает следующее:

• Когда URL-адрес местоположения браузера меняется на соответствующий сегмент пути /crisis-center, маршрутизатор активирует экземпляр CrisisListComponent и отображает его представление.
• Когда приложение запрашивает навигацию к пути /crisis-center, маршрутизатор активирует экземпляр CrisisListComponent, отображает его представление и обновляет адрес местоположения и историю браузера с URL для этого пути.

Первая конфигурация определяет массив из двух маршрутов с минимальными путями, ведущими к CrisisListComponent и HeroListComponent.

Создайте компоненты CrisisList и HeroList, чтобы маршрутизатору было что отображать.

1

ng generate component crisis-list

1

ng generate component hero-list

Замените содержимое каждого компонента следующим образцом HTML.

1
2

<h2>CRISIS CENTER</h2>
<p>Get your crisis here</p>

1
2

<h2>HEROES</h2>
<p>Get your heroes here</p>

Зарегистрируйте Router и Routes¶

Чтобы использовать Router, вы должны сначала зарегистрировать RouterModule из пакета @angular/router. Определите массив маршрутов, appRoutes, и передайте их в метод RouterModule.forRoot().

Метод RouterModule.forRoot() возвращает модуль, содержащий настроенный поставщик услуг Router, а также другие поставщики, необходимые библиотеке маршрутизации.

После загрузки приложения Router выполняет начальную навигацию на основе текущего URL браузера.

 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
27
28
29
30
31
32
33
34

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    { path: 'heroes', component: HeroListComponent },
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: true } // <-- debugging purposes only
        ),
    ],
    declarations: [
        AppComponent,
        HeroListComponent,
        CrisisListComponent,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

Регистрация RouterModule.forRoot() в массиве AppModule imports делает сервис Router доступным везде в приложении.

Добавьте выход маршрутизатора¶

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

Розетка маршрутизатора служит в качестве места, куда выводятся маршрутизируемые компоненты.

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

 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>

Определение маршрута с подстановочным знаком¶

До сих пор вы создали два маршрута в приложении: один к /crisis-center и другой к /heroes. Любой другой URL вызывает ошибку маршрутизатора и крах приложения.

Добавьте маршрут с подстановочными знаками, чтобы перехватывать недействительные URL и обрабатывать их изящно. Маршрут с подстановочным знаком имеет путь, состоящий из двух звездочек.

Он соответствует любому URL.

Таким образом, маршрутизатор выбирает этот маршрут с подстановочным знаком, если не может найти маршрут в предыдущей конфигурации.

Маршрут с подстановочным знаком может переходить к пользовательскому компоненту "404 Not Found" или redirect к существующему маршруту.

Чтобы проверить эту возможность, добавьте кнопку с RouterLink в шаблон HeroListComponent и установите ссылку на несуществующий маршрут под названием "/sidekicks".

1
2
3
4
5
6

<h2>HEROES</h2>
<p>Get your heroes here</p>

<button type="button" routerLink="/sidekicks">
    Go to sidekicks
</button>

Приложение потерпит неудачу, если пользователь нажмет на эту кнопку, потому что вы еще не определили маршрут "/sidekicks".

Вместо добавления маршрута sidekicks определите маршрут wildcard и попросите его перейти к PageNotFoundComponent.

1

{ path: '**', component: PageNotFoundComponent }

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

1

ng generate component page-not-found

1

<h2>Page not found</h2>

Теперь, когда пользователь посещает /sidekicks, или любой другой недействительный URL, браузер выдает "Страница не найдена". Адресная строка браузера продолжает указывать на недопустимый URL.

Настройка перенаправлений¶

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

1

localhost:4200

Это не соответствует ни одному из жестко закодированных маршрутов, что означает, что маршрутизатор переходит на маршрут с подстановочным знаком и отображает PageNotFoundComponent.

Приложению нужен маршрут по умолчанию к действительной странице. Страница по умолчанию для этого приложения — это список героев.

Приложение должно переходить на нее, как если бы пользователь щелкнул по ссылке "Heroes" или вставил localhost:4200/heroes в адресную строку.

Добавьте маршрут redirect, который переводит исходный относительный URL ('') в путь по умолчанию (/heroes), который вы хотите.

Добавьте маршрут по умолчанию где-то выше маршрута дикого символа. Он находится чуть выше маршрута wildcard в следующей выдержке, показывающей полный appRoutes для этой вехи.

1
2
3
4
5
6
7
8
9

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    { path: 'heroes', component: HeroListComponent },
    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

В адресной строке браузера отображается .../heroes, как если бы вы перешли туда напрямую.

Маршрут перенаправления требует свойства pathMatch, чтобы указать маршрутизатору, как сопоставить URL с путем маршрута. В этом приложении маршрутизатор должен выбрать маршрут к HeroListComponent только тогда, когда полный URL соответствует '', поэтому установите значение pathMatch в 'full'.

Завершение этапа 1¶

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

Этап 1 охватывает следующие действия:

• Загрузить библиотеку маршрутизатора
• Добавить навигационную панель в шаблон оболочки с тегами якоря, директивами routerLink и routerLinkActive.
• Добавить router-outlet в шаблон оболочки, где отображаются представления.
• Настройте модуль маршрутизатора с помощью RouterModule.forRoot().
• Настройте маршрутизатор на составление HTML5 URL браузера.
• Обрабатывать недействительные маршруты с помощью wildcard.
• Переход к маршруту по умолчанию, когда приложение запускается с пустым путем.

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

 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

angular-router-tour-of-heroes
+- src
|  +- app
|  |  +- crisis-list
|  |  |  +- crisis-list.component.css
|  |  |  +- crisis-list.component.html
|  |  |  +- crisis-list.component.ts
|  |  +- hero-list
|  |  |  +- hero-list.component.css
|  |  |  +- hero-list.component.html
|  |  |  +- hero-list.component.ts
|  |   +- page-not-found
|  |  |  +- page-not-found.component.css
|  |  |  +- page-not-found.component.html
|  |  |  +- page-not-found.component.ts
|  |  +- app.component.css
|  |  +- app.component.html
|  |  +- app.component.ts
|  |  +- app.module.ts
|  +- main.ts
|  +- index.html
|  +- styles.css
|  +- tsconfig.json
+- node_modules …
+- package.json

Вот файлы этой вехи.

 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>

 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
27
28
29
30
31
32
33
34
35
36
37
38
39

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    { path: 'heroes', component: HeroListComponent },

    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: true } // <-- debugging purposes only
        ),
    ],
    declarations: [
        AppComponent,
        HeroListComponent,
        CrisisListComponent,
        PageNotFoundComponent,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

1
2
3
4
5
6

<h2>HEROES</h2>
<p>Get your heroes here</p>

<button type="button" routerLink="/sidekicks">
    Go to sidekicks
</button>

1
2

<h2>CRISIS CENTER</h2>
<p>Get your crisis here</p>

1

<h2>Page not found</h2>

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

<html lang="en">
    <head>
        <!-- Set the base href -->
        <base href="/" />
        <title>Angular Router</title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
    </head>

    <body>
        <app-root></app-root>
    </body>
</html>

Этап 2: Модуль маршрутизации¶

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

Модуль маршрутизации имеет несколько характеристик:

• Отделяет проблемы маршрутизации от других проблем приложения.
• Предоставляет модуль для замены или удаления при тестировании приложения
• Обеспечивает известное местоположение для поставщиков услуг маршрутизации, таких как охранники и резолверы.
• Не объявляет компоненты

Интегрируйте маршрутизацию в ваше приложение¶

Пример приложения с маршрутизацией не включает маршрутизацию по умолчанию. Когда вы используете Angular CLI для создания проекта, который использует маршрутизацию, установите опцию --routing для проекта или приложения, а также для каждого NgModule.

Когда вы создаете или инициализируете новый проект (используя команду CLI ng new) или новое приложение (используя команду ng generate app), укажите опцию --routing.

Это даст команду CLI включить пакет @angular/router npm и создать файл с именем app-routing.module.ts.

Затем вы сможете использовать маршрутизацию в любом Ng-модуле, который вы добавите в проект или приложение.

Например, следующая команда создает NgModule, который может использовать маршрутизацию.

1

ng generate module my-module --routing

Это создает отдельный файл my-module-routing.module.ts для хранения маршрутов NgModule. Файл включает пустой объект Routes, который вы можете заполнить маршрутами к различным компонентам и NgModules.

Рефакторинг конфигурации маршрутизации в модуль маршрутизации¶

Создайте модуль AppRouting в папке /app, который будет содержать конфигурацию маршрутизации.

1

ng generate module app-routing --module app --flat

Импортируйте символы CrisisListComponent, HeroListComponent и PageNotFoundComponent, как вы это сделали в app.module.ts. Затем перенесите импорт Router и конфигурацию маршрутизации, включая RouterModule.forRoot(), в этот модуль маршрутизации.

Реэкспортируйте модуль Angular RouterModule, добавив его в массив exports модуля. Благодаря реэкспорту RouterModule здесь, компоненты, объявленные в AppModule, получают доступ к директивам маршрутизации, таким как RouterLink и RouterOutlet.

После этих шагов файл должен выглядеть следующим образом.

 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
27

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

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    { path: 'heroes', component: HeroListComponent },
    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

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

Далее обновите файл app.module.ts, удалив RouterModule.forRoot в массиве imports.

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
    imports: [BrowserModule, FormsModule, AppRoutingModule],
    declarations: [
        AppComponent,
        HeroListComponent,
        CrisisListComponent,
        PageNotFoundComponent,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

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

Преимущества модуля маршрутизации¶

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

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

Некоторые разработчики пропускают модуль маршрутизации, когда конфигурация минимальна, и объединяют конфигурацию маршрутизации непосредственно в сопутствующий модуль (например, AppModule).

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

Он облегчает тестирование функционального модуля.

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

Именно здесь разработчики ожидают найти и расширить конфигурацию маршрутизации.

Веха 3: Функция героев¶

Этот этап включает в себя следующее:

• Организация приложения и маршрутов в области функций с помощью модулей.
• Императивная навигация от одного компонента к другому.
• Передача необходимой и необязательной информации в параметрах маршрута.

Этот пример приложения воссоздает функцию героев в разделе "Услуги" учебника Tour of Heroes и использует большую часть кода из Код примера Tour of Heroes: Услуги.

Типичное приложение имеет несколько функциональных областей, каждая из которых посвящена определенной бизнес-цели и имеет свою собственную папку.

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

Добавить функциональность героев¶

Выполните следующие шаги:

• Для управления героями создайте HeroesModule с маршрутизацией в папке heroes и зарегистрируйте его в корневом AppModule.

  1	ng generate module heroes/heroes --module app --flat --routing

• Переместите папку placeholder hero-list, находящуюся в папке app, в папку heroes.

• Скопируйте содержимое heroes/heroes.component.html из учебника "Services" в шаблон hero-list.component.html.

  • Переименуйте <h2> в <h2>HEROES</h2>.

  • Удалите компонент <app-hero-detail> в нижней части шаблона.

• Скопируйте содержимое файла heroes/heroes.component.css из живого примера в файл hero-list.component.css.

• Скопируйте содержимое heroes/heroes.component.ts из живого примера в файл hero-list.component.ts.

  • Измените имя класса компонента на HeroListComponent.

  • Измените selector на app-hero-list.

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

    Однако они полезны для их идентификации и назначения в дереве элементов HTML.

• Скопируйте папку hero-detail, файлы hero.ts, hero.service.ts и mock-heroes.ts в подпапку heroes.

• Скопируйте файл message.service.ts в папку src/app.

• Обновите импорт относительного пути к message.service в файле hero.service.ts.

Далее обновите метаданные HeroesModule.

• Импортируйте и добавьте HeroDetailComponent и HeroListComponent в массив declarations в HeroesModule.

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { HeroesRoutingModule } from './heroes-routing.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroesRoutingModule,
    ],
    declarations: [HeroListComponent, HeroDetailComponent],
})
export class HeroesModule {}

Структура файлов управления героями выглядит следующим образом:

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

src/app/heroes
+- hero-detail
|  +- hero-detail.component.css
|  +- hero-detail.component.html
|  +- hero-detail.component.ts
+- hero-list
|  +- hero-list.component.css
|  +- hero-list.component.html
|  +- hero-list.component.ts
+- hero.service.ts
+- hero.ts
+- heroes-routing.module.ts
+- heroes.module.ts
+- mock-heroes.ts

Требования к маршрутизации функции героев¶

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

Когда вы нажимаете на героя, вид детализации должен отобразить именно этого героя.

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

Импортируйте компоненты героев из их новых мест в папке src/app/heroes/ и определите два маршрута героев.

Теперь, когда у вас есть маршруты для модуля Heroes, зарегистрируйте их в Router с помощью RouterModule, как вы это делали в AppRoutingModule, с важным отличием.

В модуле AppRoutingModule вы использовали статический метод RouterModule.forRoot() для регистрации маршрутов и поставщиков услуг уровня приложения. В функциональном модуле вы используете статический метод forChild().

Обновленный HeroesRoutingModule выглядит следующим образом:

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

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

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
    { path: 'heroes', component: HeroListComponent },
    { path: 'hero/:id', component: HeroDetailComponent },
];

@NgModule({
    imports: [RouterModule.forChild(heroesRoutes)],
    exports: [RouterModule],
})
export class HeroesRoutingModule {}

Удаление дубликатов маршрутов героев¶

Маршруты героев в настоящее время определяются в двух местах: в HeroesRoutingModule, посредством HeroesModule, и в AppRoutingModule.

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

Удалите импорт HeroListComponent и маршрут /heroes из файла app-routing.module.ts.

Оставьте маршруты по умолчанию и wildcard, так как они все еще используются на верхнем уровне приложения.

 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
27

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

import { CrisisListComponent } from './crisis-list/crisis-list.component';
// import { HeroListComponent } from './hero-list/hero-list.component';  // <-- delete this line
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

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

Удалите декларации героев¶

Поскольку HeroesModule теперь предоставляет HeroListComponent, удалите его из массива declarations модуля AppModule. Теперь, когда у вас есть отдельный HeroesModule, вы можете развивать функцию героя с помощью большего количества компонентов и различных маршрутов.

После этих шагов 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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HeroesModule,
        AppRoutingModule,
    ],
    declarations: [
        AppComponent,
        CrisisListComponent,
        PageNotFoundComponent,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

Порядок импорта модулей¶

Обратите внимание, что в массиве импортов модулей, AppRoutingModule стоит последним и идет после HeroesModule.

1
2
3
4
5
6

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
],

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

Когда все маршруты были в одном AppRoutingModule, вы поместили маршруты по умолчанию и wildcard последними, после маршрута /heroes, чтобы у маршрутизатора был шанс сопоставить URL с маршрутом /heroes до попадания на маршрут wildcard и перехода к "Страница не найдена".

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

Маршрут дикого знака — который соответствует каждому URL— будет перехватывать попытку перехода к маршруту героя.

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

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

Вернитесь к модулю HeroesRoutingModule и снова посмотрите на определения маршрутов. Маршрут к HeroDetailComponent имеет токен :id в пути.

1

{ path: 'hero/:id', component: HeroDetailComponent }

Токен :id создает слот в пути для параметра маршрута. В данном случае эта конфигурация заставляет маршрутизатор вставить id героя в этот слот.

Если вы скажете маршрутизатору перейти к компоненту detail и отобразить "Magneta", вы ожидаете, что ID героя появится в URL браузера следующим образом:

1

localhost:4200/hero/15

Если пользователь введет этот URL в адресную строку браузера, маршрутизатор должен распознать шаблон и перейти к тому же детальному представлению "Magneta".

Установка параметров маршрута в представлении списка¶

После перехода к компоненту HeroDetailComponent вы ожидаете увидеть подробную информацию о выбранном герое. Вам нужны две части информации: путь маршрутизации к компоненту и id героя.

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

1

<a [routerLink]="['/hero', hero.id]"></a>

Маршрутизатор составляет URL назначения из массива следующим образом: localhost:4200/hero/15.

Маршрутизатор извлекает параметр маршрута (id:15) из URL и передает его в HeroDetailComponent с помощью сервиса ActivatedRoute.

Активированный маршрут в действии¶

Импортируйте токены Router, ActivatedRoute и ParamMap из пакета router.

1
2
3
4
5

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

Импортируйте оператор switchMap, поскольку он понадобится вам позже для обработки параметров маршрута Observable.

1

import { switchMap } from 'rxjs/operators';

Добавьте сервисы как приватные переменные в конструктор, чтобы Angular инжектировал их (сделал их видимыми для компонента).

1
2
3
4
5

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private service: HeroService
) {}

В методе ngOnInit() используйте службу ActivatedRoute для получения параметров маршрута, извлечения id героя из параметров и получения героя для отображения.

1
2
3
4
5
6

ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')!))
  );
}

Когда карта изменяется, paramMap получает параметр id из измененных параметров.

Затем вы говорите HeroService получить героя с этим id и возвращаете результат запроса HeroService.

Оператор switchMap делает две вещи. Он сглаживает Observable<Hero>, который возвращает HeroService, и отменяет предыдущие ожидающие запросы.

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

AsyncPipe обрабатывает наблюдаемую подписку, и свойство hero компонента будет установлено с полученным героем.

ParamMap API¶

API ParamMap вдохновлен интерфейсом URLSearchParams. Он предоставляет методы для обработки доступа к параметрам как для параметров маршрута (paramMap), так и для параметров запроса (queryParamMap).

Observable paramMap и повторное использование компонентов¶

В этом примере вы получаете карту параметров маршрута из Observable. Это означает, что карта параметров маршрута может меняться в течение жизни этого компонента.

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

Предположим, на навигационной панели родительского компонента есть кнопки "вперед" и "назад", которые прокручивают список героев. Каждое нажатие кнопки обязательно приводило к переходу к HeroDetailComponent со следующим или предыдущим id.

Вы не хотите, чтобы маршрутизатор удалял текущий экземпляр HeroDetailComponent из DOM только для того, чтобы заново создать его для следующего id, так как это приведет к повторному рендерингу представления. Для улучшения UX маршрутизатор повторно использует один и тот же экземпляр компонента и обновляет параметр.

Поскольку ngOnInit() вызывается только один раз при инстанцировании компонента, вы можете определить, когда параметры маршрута изменяются в пределах одного и того же экземпляра, используя наблюдаемое свойство paramMap.

snapshot: ненаблюдаемая альтернатива¶

Это приложение не будет повторно использовать HeroDetailComponent. Пользователь всегда возвращается к списку героев, чтобы выбрать другого героя для просмотра.

Невозможно перейти от одной детали героя к другой детали героя без посещения компонента списка между ними.

Поэтому маршрутизатор каждый раз создает новый экземпляр HeroDetailComponent.

Когда вы точно знаете, что экземпляр HeroDetailComponent никогда не будет использоваться повторно, вы можете использовать snapshot.

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

1
2
3
4
5

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id')!;

  this.hero$ = this.service.getHero(id);
}

Навигация назад к компоненту списка¶

Кнопка "Назад" компонента HeroDetailComponent использует метод gotoHeroes(), который принудительно перемещает обратно к компоненту HeroListComponent.

Метод маршрутизатора navigate() принимает тот же массив параметров ссылки из одного элемента, который вы можете связать с директивой [routerLink]. Он содержит путь к компоненту HeroListComponent:

1
2
3

gotoHeroes() {
  this.router.navigate(['/heroes']);
}

Параметры маршрута: Обязательные или необязательные?¶

Используйте route parameters для указания обязательного значения параметра в URL маршрута, как при переходе к HeroDetailComponent для просмотра героя с id 15:

1

localhost:4200/hero/15

Вы также можете добавить необязательную информацию в запрос маршрута. Например, при возврате к списку hero-detail.component.ts из представления деталей героя было бы неплохо, если бы просматриваемый герой был предварительно выбран в списке.

Вы реализуете эту возможность, включив id просматриваемого героя в URL в качестве необязательного параметра при возврате из HeroDetailComponent.

Необязательная информация может также включать другие формы, такие как:

• Свободно структурированные критерии поиска; например, name='wind*'.
• Множественные значения; например, after='12/31/2015' & before='1/1/2017' — без особого порядка — before='1/1/2017' & after='12/31/2015' — в различных форматах — during='currentYear'.

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

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

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

Список героев: опциональный выбор героя¶

При переходе к компоненту HeroDetailComponent вы указали требуемый id редактируемого героя в параметре маршрута и сделали его вторым элементом массива link parameters array.

1

<a [routerLink]="['/hero', hero.id]"></a>

Маршрутизатор встроил значение id в навигационный URL, потому что вы определили его как параметр маршрута с маркером-заполнителем :id в маршруте path:

1

{ path: 'hero/:id', component: HeroDetailComponent }

Когда пользователь нажимает кнопку "Назад", HeroDetailComponent создает другой массив параметров ссылок, который он использует для перехода обратно к HeroListComponent.

1
2
3

gotoHeroes() {
  this.router.navigate(['/heroes']);
}

В этом массиве отсутствует параметр route, потому что ранее вам не нужно было отправлять информацию в HeroListComponent.

Теперь отправьте id текущего героя с навигационным запросом, чтобы HeroListComponent мог выделить этого героя в своем списке.

Отправьте id с объектом, который содержит необязательный параметр id. Для демонстрации в объекте есть дополнительный параметр (foo), который HeroListComponent должен игнорировать.

Вот пересмотренный навигационный оператор:

1
2
3
4
5
6
7

gotoHeroes(hero: Hero) {
  const heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

Приложение по-прежнему работает. Нажатие кнопки "назад" возвращает к представлению списка героев.

Посмотрите на адресную строку браузера.

Она должна выглядеть примерно так, в зависимости от того, где вы ее запустили:

1

localhost:4200/heroes;id=15;foo=foo

Значение id отображается в URL как (;id=15;foo=foo), а не в пути URL. Путь для маршрута "Герои" не содержит токена :id.

Необязательные параметры маршрута не разделены символами "?" и "&", как это было бы в строке запроса URL. Они разделяются точкой с запятой ";".

Это матричная нотация URL.

Параметры маршрута в сервисе ActivatedRoute¶

В текущем состоянии разработки список героев не изменяется. Ни одна строка героев не выделена.

Для HeroListComponent необходим код, который ожидает параметры.

Ранее, при переходе от HeroListComponent к HeroDetailComponent, вы подписывались на карту параметров маршрута Observable и делали ее доступной для HeroDetailComponent

в службе ActivatedRoute.

Вы внедрили этот сервис в конструктор HeroDetailComponent.

На этот раз вы будете перемещаться в обратном направлении, от HeroDetailComponent к HeroListComponent.

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

1

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

Импортируйте оператор switchMap для выполнения операции над Observable карты параметров маршрута.

1
2

import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

Вставьте ActivatedRoute в конструктор HeroListComponent.

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

export class HeroListComponent implements OnInit {
    heroes$!: Observable<Hero[]>;
    selectedId = 0;

    constructor(
        private service: HeroService,
        private route: ActivatedRoute
    ) {}

    ngOnInit() {
        this.heroes$ = this.route.paramMap.pipe(
            switchMap((params) => {
                this.selectedId = parseInt(
                    params.get('id')!,
                    10
                );
                return this.service.getHeroes();
            })
        );
    }
}

Свойство ActivatedRoute.paramMap представляет собой Observable карту параметров маршрута. При переходе пользователя к компоненту paramMap выдает новую карту значений, включающую id.

В функции ngOnInit() вы подписываетесь на эти значения, устанавливаете selectedId и получаете героев.

Обновите шаблон с помощью class binding. Привязка добавляет CSS-класс selected, когда сравнение возвращает true, и удаляет его, когда false.

Ищите его в повторяющемся теге <li>, как показано здесь:

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

<h2>Heroes</h2>
<ul class="heroes">
    <li
        *ngFor="let hero of heroes$ | async"
        [class.selected]="hero.id === selectedId"
    >
        <a [routerLink]="['/hero', hero.id]">
            <span class="badge">{{ hero.id }}</span>{{
            hero.name }}
        </a>
    </li>
</ul>

<button type="button" routerLink="/sidekicks">
    Go to sidekicks
</button>

Добавьте несколько стилей для применения при выборе героя.

1
2
3
4
5
6
7

.heroes .selected a {
    background-color: #d6e6f7;
}

.heroes .selected a:hover {
    background-color: #bdd7f5;
}

Когда пользователь переходит от списка героев к герою "Magneta" и обратно, "Magneta" отображается выбранной:

Необязательный параметр маршрута foo безвреден, и маршрутизатор продолжает его игнорировать.

Добавление маршрутизируемых анимаций¶

В этом разделе показано, как добавить некоторые анимации в HeroDetailComponent.

Сначала импортируйте BrowserAnimationsModule и добавьте его в массив imports:

1
2
3
4
5
6
7

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
  ],
})

Далее, добавьте объект data в маршруты для HeroListComponent и HeroDetailComponent. Переходы основаны на states, и вы используете данные animation из маршрута, чтобы предоставить именованную анимацию state для переходов.

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

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

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
    {
        path: 'heroes',
        component: HeroListComponent,
        data: { animation: 'heroes' },
    },
    {
        path: 'hero/:id',
        component: HeroDetailComponent,
        data: { animation: 'hero' },
    },
];

@NgModule({
    imports: [RouterModule.forChild(heroesRoutes)],
    exports: [RouterModule],
})
export class HeroesRoutingModule {}

Создайте файл animations.ts в корневой папке src/app/. Его содержимое выглядит следующим образом:

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import {
    trigger,
    animateChild,
    group,
    transition,
    animate,
    style,
    query,
} from '@angular/animations';

// Routable animations
export const slideInAnimation = trigger('routeAnimation', [
    transition('heroes <=> hero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
            }),
        ]),
        query(':enter', [style({ left: '-100%' })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [
                animate(
                    '300ms ease-out',
                    style({ left: '100%' })
                ),
            ]),
            query(':enter', [
                animate(
                    '300ms ease-out',
                    style({ left: '0%' })
                ),
            ]),
        ]),
        query(':enter', animateChild()),
    ]),
]);

Этот файл делает следующее:

• Импортирует символы анимации, которые создают триггеры анимации, контролируют состояние и управляют переходами между состояниями.
• Экспортирует константу с именем slideInAnimation, установленную на триггер анимации с именем routeAnimation.
• Определяет один переход при переключении между маршрутами героев и героев для облегчения входа компонента с левой стороны экрана, когда он входит в представление приложения (:enter), другой для анимации компонента справа, когда он покидает представление приложения (:leave)

Вернитесь в AppComponent, импортируйте токен RouterOutlet из пакета @angular/router и slideInAnimation из './animations.ts.

Добавьте массив animations в метаданные @Component, содержащие slideInAnimation.

1
2
3
4
5
6
7
8
9

import { ChildrenOutletContexts } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [ slideInAnimation ]
})

Чтобы использовать маршрутизируемые анимации, оберните RouterOutlet внутри элемента, используйте триггер @routeAnimation и привяжите его к элементу.

Чтобы @routeAnimation переходила в состояния выключения ключа, предоставьте ей данные из ActivatedRoute. Переменная RouterOutlet раскрывается как переменная шаблона outlet, поэтому вы привязываете ссылку на выход маршрутизатора.

В данном примере используется переменная routerOutlet.

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

<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>
<div [@routeAnimation]="getAnimationData()">
    <router-outlet></router-outlet>
</div>

Свойство @routeAnimation связано с getAnimationData(), которое возвращает свойство анимации из данных, предоставленных основным маршрутом. Свойство animation соответствует именам transition, которые вы использовали в slideInAnimation, определенном в animations.ts.

1
2
3
4
5
6
7
8

export class AppComponent {
    constructor(private contexts: ChildrenOutletContexts) {}

    getAnimationData() {
        return this.contexts.getContext('primary')?.route
            ?.snapshot?.data?.['animation'];
    }
}

При переключении между двумя маршрутами, HeroDetailComponent и HeroListComponent теперь облегчаются слева при маршрутизации к, и сдвигаются вправо при навигации прочь.

Завершение этапа 3¶

В этом разделе было рассмотрено следующее:

• Организация приложения по функциональным областям
• Императивная навигация от одного компонента к другому
• Передача информации в параметрах маршрута и подписка на них в компоненте
• Импорт функциональной области NgModule в 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
27
28
29
30
31
32
33
34
35
36
37
38

angular-router-tour-of-heroes
+- src
|  +- app
|  |  +- crisis-list
|  |  |  +- crisis-list.component.css
|  |  |  +- crisis-list.component.html
|  |  |  +- crisis-list.component.ts
|  |  +- heroes
|  |  |  +- hero-detail
|  |  |  |  +- hero-detail.component.css
|  |  |  |  +- hero-detail.component.html
|  |  |  |  +- hero-detail.component.ts
|  |  |  +- hero-list
|  |  |  |  +- hero-list.component.css
|  |  |  |  +- hero-list.component.html
|  |  |  |  +- hero-list.component.ts
|  |  |  +- hero.service.ts
|  |  |  +- hero.ts
|  |  |  +- heroes-routing.module.ts
|  |  |  +- heroes.module.ts
|  |  |  +- mock-heroes.ts
|  |  +- page-not-found
|  |  |  +- page-not-found.component.css
|  |  |  +- page-not-found.component.html
|  |  |  +- page-not-found.component.ts
|  +- animations.ts
|  +- app.component.css
|  +- app.component.html
|  +- app.component.ts
|  +- app.module.ts
|  +- app-routing.module.ts
|  +- main.ts
|  +- message.service.ts
|  +- index.html
|  +- styles.css
|  +- tsconfig.json
+- node_modules …
+- package.json

Вот соответствующие файлы для этой версии примера приложения.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import {
    trigger,
    animateChild,
    group,
    transition,
    animate,
    style,
    query,
} from '@angular/animations';

// Routable animations
export const slideInAnimation = trigger('routeAnimation', [
    transition('heroes <=> hero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
            }),
        ]),
        query(':enter', [style({ left: '-100%' })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [
                animate(
                    '300ms ease-out',
                    style({ left: '100%' })
                ),
            ]),
            query(':enter', [
                animate(
                    '300ms ease-out',
                    style({ left: '0%' })
                ),
            ]),
        ]),
        query(':enter', animateChild()),
    ]),
]);

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

<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>
<div [@routeAnimation]="getAnimationData()">
    <router-outlet></router-outlet>
</div>

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

import { Component } from '@angular/core';
import { ChildrenOutletContexts } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    animations: [slideInAnimation],
})
export class AppComponent {
    constructor(private contexts: ChildrenOutletContexts) {}

    getAnimationData() {
        return this.contexts.getContext('primary')?.route
            ?.snapshot?.data?.['animation'];
    }
}

 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
27
28

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HeroesModule,
        AppRoutingModule,
    ],
    declarations: [
        AppComponent,
        CrisisListComponent,
        PageNotFoundComponent,
    ],
    bootstrap: [AppComponent],
})
export class 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
27

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

import { CrisisListComponent } from './crisis-list/crisis-list.component';
/* . . . */
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    {
        path: 'crisis-center',
        component: CrisisListComponent,
    },
    /* . . . */
    { path: '', redirectTo: '/heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent },
];

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

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* HeroListComponent's private CSS styles */
.heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 100%;
}
.heroes li {
    position: relative;
    cursor: pointer;
}

.heroes li:hover {
    left: 0.1em;
}

.heroes a {
    color: black;
    text-decoration: none;
    display: block;
    font-size: 1.2rem;
    background-color: #eee;
    margin: 0.5rem 0.5rem 0.5rem 0;
    padding: 0.5rem 0;
    border-radius: 4px;
}

.heroes a:hover {
    color: #2c3a41;
    background-color: #e6e6e6;
}

.heroes a:active {
    background-color: #525252;
    color: #fafafa;
}

.heroes .selected a {
    background-color: #d6e6f7;
}

.heroes .selected a:hover {
    background-color: #bdd7f5;
}

.heroes .badge {
    padding: 0.5em 0.6em;
    color: white;
    background-color: #435b60;
    min-width: 16px;
    margin-right: 0.8em;
    border-radius: 4px 0 0 4px;
}

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

<h2>Heroes</h2>
<ul class="heroes">
    <li
        *ngFor="let hero of heroes$ | async"
        [class.selected]="hero.id === selectedId"
    >
        <a [routerLink]="['/hero', hero.id]">
            <span class="badge">{{ hero.id }}</span>{{
            hero.name }}
        </a>
    </li>
</ul>

<button type="button" routerLink="/sidekicks">
    Go to sidekicks
</button>

 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
27
28
29
30
31
32
33
34
35

// TODO: Feature Componetized like CrisisCenter
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { HeroService } from '../hero.service';
import { Hero } from '../hero';

@Component({
    selector: 'app-hero-list',
    templateUrl: './hero-list.component.html',
    styleUrls: ['./hero-list.component.css'],
})
export class HeroListComponent implements OnInit {
    heroes$!: Observable<Hero[]>;
    selectedId = 0;

    constructor(
        private service: HeroService,
        private route: ActivatedRoute
    ) {}

    ngOnInit() {
        this.heroes$ = this.route.paramMap.pipe(
            switchMap((params) => {
                this.selectedId = parseInt(
                    params.get('id')!,
                    10
                );
                return this.service.getHeroes();
            })
        );
    }
}

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

<h2>Heroes</h2>
<div *ngIf="hero$ | async as hero">
    <h3>{{ hero.name }}</h3>
    <p>Id: {{ hero.id }}</p>
    <label for="hero-name">Hero name: </label>
    <input
        type="text"
        id="hero-name"
        [(ngModel)]="hero.name"
        placeholder="name"
    />
    <button type="button" (click)="gotoHeroes(hero)">
        Back
    </button>
</div>

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import { switchMap } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import {
    Router,
    ActivatedRoute,
    ParamMap,
} from '@angular/router';
import { Observable } from 'rxjs';

import { HeroService } from '../hero.service';
import { Hero } from '../hero';

@Component({
    selector: 'app-hero-detail',
    templateUrl: './hero-detail.component.html',
    styleUrls: ['./hero-detail.component.css'],
})
export class HeroDetailComponent implements OnInit {
    hero$!: Observable<Hero>;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private service: HeroService
    ) {}

    ngOnInit() {
        this.hero$ = this.route.paramMap.pipe(
            switchMap((params: ParamMap) =>
                this.service.getHero(params.get('id')!)
            )
        );
    }

    gotoHeroes(hero: Hero) {
        const heroId = hero ? hero.id : null;
        // Pass along the hero id if available
        // so that the HeroList component can select that hero.
        // Include a junk 'foo' property for fun.
        this.router.navigate([
            '/heroes',
            { id: heroId, foo: 'foo' },
        ]);
    }
}

 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
27
28
29
30
31
32
33

import { Injectable } from '@angular/core';

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from '../message.service';

@Injectable({
    providedIn: 'root',
})
export class HeroService {
    constructor(private messageService: MessageService) {}

    getHeroes(): Observable<Hero[]> {
        // TODO: send the message _after_ fetching the heroes
        this.messageService.add(
            'HeroService: fetched heroes'
        );
        return of(HEROES);
    }

    getHero(id: number | string) {
        return this.getHeroes().pipe(
            // (+) before `id` turns the string into a number
            map(
                (heroes: Hero[]) =>
                    heroes.find((hero) => hero.id === +id)!
            )
        );
    }
}

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { HeroesRoutingModule } from './heroes-routing.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroesRoutingModule,
    ],
    declarations: [HeroListComponent, HeroDetailComponent],
})
export class HeroesModule {}

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

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

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
    {
        path: 'heroes',
        component: HeroListComponent,
        data: { animation: 'heroes' },
    },
    {
        path: 'hero/:id',
        component: HeroDetailComponent,
        data: { animation: 'hero' },
    },
];

@NgModule({
    imports: [RouterModule.forChild(heroesRoutes)],
    exports: [RouterModule],
})
export class HeroesRoutingModule {}

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

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class MessageService {
    messages: string[] = [];

    add(message: string) {
        this.messages.push(message);
    }

    clear() {
        this.messages = [];
    }
}

Веха 4: Функция кризисного центра¶

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

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

• Создайте подпапку crisis-center в папке src/app.
• Скопируйте файлы и папки из папки app/heroes в новую папку crisis-center.
• В новых файлах измените все упоминания "героя" на "кризис", а "героев" на "кризисы".
• Переименуйте файлы NgModule в crisis-center.module.ts и crisis-center-routing.module.ts.

Используйте имитацию кризисов вместо имитации героев:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { Crisis } from './crisis';

export const CRISES: Crisis[] = [
    { id: 1, name: 'Dragon Burning Cities' },
    { id: 2, name: 'Sky Rains Great White Sharks' },
    { id: 3, name: 'Giant Asteroid Heading For Earth' },
    {
        id: 4,
        name: 'Procrastinators Meeting Delayed Again',
    },
];

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

Кризисный центр с дочерними маршрутами¶

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

• Каждая область функций находится в своей собственной папке.
• Каждая функция имеет свой модуль функции Angular
• Каждая область имеет свой корневой компонент области
• Каждый корневой компонент области имеет свой собственный выход маршрутизатора и дочерние маршруты.
• Маршруты областей функций редко (если вообще когда-либо) пересекаются с маршрутами других функций.

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

Дочерний компонент маршрутизации¶

Создайте компонент CrisisCenter в папке crisis-center:

1

ng generate component crisis-center/crisis-center

Обновите шаблон компонента с помощью следующей разметки:

1
2

<h2>Crisis Center</h2>
<router-outlet></router-outlet>

Компонент CrisisCenterComponent имеет следующее общее с AppComponent:

• Он является корнем области кризисного центра, так же как AppComponent является корнем всего приложения.
• Это оболочка для области функций кризисного управления, так же как AppComponent является оболочкой для управления рабочим процессом высокого уровня.

Как и большинство оболочек, класс CrisisCenterComponent является минимальным, поскольку в нем нет бизнес-логики, а в его шаблоне нет ссылок, только заголовок и <router-outlet> для дочернего компонента кризисного центра.

Конфигурация дочернего маршрута¶

В качестве главной страницы для функции "Кризисный центр" создайте компонент CrisisCenterHome в папке crisis-center.

1

ng generate component crisis-center/crisis-center-home

Обновите шаблон с приветственным сообщением для Кризисного центра.

1