Настройка маршрутов в Angular

В этом уроке Вы познакомитесь с маршрутизацией Angular — способом перехода между представлениями и управления URL-адресами в приложении.

Что такое маршрутизация?

Маршрутизация помогает переходить между разными компонентами или страницами приложения Angular в зависимости от URL-адреса.

Настройка модуля маршрутизации

Создайте модуль маршрутизации при запуске проекта или позже с помощью Angular CLI:

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

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

Маршруты определяются как массив путей, связанных с компонентами:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Область вывода маршрутизатора

Используйте <router-outlet></router-outlet>, чтобы динамически отображать соответствующие компоненты в зависимости от маршрута.

<router-outlet></router-outlet>

Навигация с помощью routerLink

Переходите между представлениями с помощью директивы routerLink:

<a routerLink="/home">Home</a>

Программная навигация

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

this.router.navigate(['/home']);

Маршруты с подстановочным шаблоном

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

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

Итоги

Теперь Вы понимаете основы маршрутизации и умеете эффективно настраивать маршруты в приложениях Angular. Отличная работа!