Маршрутизация: настройка и маршруты

Маршрутизатор (router) показывает разные компоненты по разным адресам без перезагрузки страницы. Адрес /posts — список статей, /todos — список дел. Пользователь может добавить страницу в закладки или нажать «Назад» в браузере, как на обычном сайте.

Где настроены маршруты

Проект, созданный ng new, уже подключил маршрутизатор: в src/app/app.config.ts есть строка provideRouter(routes), а сами маршруты лежат в src/app/app.routes.ts. Опишите их:

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { PostList } from './post-list/post-list';
import { TodoList } from './todo-list/todo-list';
 
export const routes: Routes = [
  { path: 'posts', component: PostList },
  { path: 'todos', component: TodoList },
];

Каждый маршрут связывает путь (без начального слеша) с компонентом.

Место для страницы

Тег <router-outlet /> отмечает место, куда маршрутизатор выводит компонент текущего маршрута. Он стоит в шаблоне главного компонента:

<!-- src/app/app.html -->
<h1>Мой блог</h1>
<router-outlet />

В классе App должен быть импортирован RouterOutlet — в новом проекте он уже есть. Откройте http://localhost:4200/posts — под заголовком появится список статей, а http://localhost:4200/todos покажет список дел.

Ссылки

Обычная ссылка href перезагрузит всё приложение. Для переходов внутри него используют директиву routerLink:

// src/app/app.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

<!-- src/app/app.html -->
<nav>
  <a routerLink="/posts" routerLinkActive="active">Статьи</a>
  <a routerLink="/todos" routerLinkActive="active">Задачи</a>
</nav>
<router-outlet />

Щелчки по ссылкам меняют адрес и содержимое без перезагрузки. routerLinkActive добавляет класс active ссылке на текущую страницу — его удобно подсветить в app.css.

Перенаправление и страница 404

// src/app/app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: 'posts', pathMatch: 'full' },
  { path: 'posts', component: PostList, title: 'Статьи' },
  { path: 'todos', component: TodoList, title: 'Задачи' },
  { path: '**', component: NotFound },
];

Компонент NotFound создайте командой ng generate component not-found и напишите в его шаблоне «Страница не найдена». Не забудьте импортировать его в app.routes.ts.

Частая ошибка

Ставить маршрут ** не в конец массива. Маршрутизатор проверяет маршруты по порядку и берёт первый подходящий, а ** подходит к любому адресу. Все маршруты после него никогда не сработают. Держите ** последним.