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

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

1. Импортируем компоненты.

В файле app.routes.ts вы импортируете созданные вами компоненты. Это позволяет вам ссылаться на эти компоненты при работе ваших маршрутов.

	
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';		
		

2. Создаем коллекцию маршрутов.

Создайте массив маршрутов в том же файле app.routes.ts и определите ваши маршруты. Каждый маршрут представляет собой объект JavaScript, содержащий путь (URL) и компонент:

	
export const routes: Routes = [
    { path: 'first-component', component: FirstComponent },
    { path: 'second-component', component: SecondComponent}
];
	

3. Настраиваем приложение.

Добавьте следующую конфигурацию в файл app.config.ts:

	
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};
	

4. Настраиваем навигацию.

В вашем шаблоне приложения (например, app.component.html) добавьте навигационные ссылки для двух компонентов:

	
<h1>Angular Router App
  <nav>
    <ul>
      <li><a routerLink="first-component" routerLinkActive="active">First Component</a></li>
      <li><a routerLink="second-component" routerLinkActive="active">Second Component</a></li>
    </ul>
  </nav>

  <router-outlet></router-outlet>
	

Вам также необходимо добавить RouterLink, RouterLinkActive и RouterOutlet в массив импортов AppComponent.

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

	
<a [routerLink]="['/products', productID]">View Product
	

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

Кроме того, вы можете применять навигацию с помощью Router.navigate.

	
constructor(private router: Router) {}

goToItems() {
  this.router.navigate(['/items']);
}
	

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

	
goToItemDetails(itemID: number) {
  this.router.navigate(['/items', itemID]);
}
	

Вам также необходимо добавить Router в массив импортов AppComponent.

5. Порядок Маршрутов

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

6. Перенаправления (Redirect).

Реализуйте перенаправления, настроив маршрут с параметрами redirectTo и pathMatch. Например:

	
{ path: '', redirectTo: '/home', pathMatch: 'full' },
	

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

7. Отображение страницы 404.

Если вы хотите отобразить настраиваемую страницу 404, настройте маршрут подстановки с установленным свойством компонента равным PageNotFoundComponent:

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

8. Дочерние (вложенные) маршруты.

По мере роста вашего приложения рассмотрите создание дочерних маршрутов относительно компонента. Их называют дочерними маршрутами. Включите второй <router-outlet> в шаблон родительского компонента и определите дочерние маршруты в массиве Routes:

	
const routes: Routes = [
    {
        path: 'parent',
        component: ParentComponent,
        children: [
        { path: 'child1', component: Child1Component },
        { path: 'child2', component: Child2Component },
        // Add more child routes as needed
        ]
    }
];
	

9. Установка заголовков страницы.

Присвоить уникальные заголовки страницам, используя свойство title в конфигурации маршрута. Например:

	
const routes: Routes = [
    {
        path: 'parent',
        title: 'Parent',
        component: ParentComponent,
        children: [
        { path: 'child1', title: 'Child1', component: Child1Component },
        { path: 'child2', title: 'Child2', component: Child2Component },
        // Add more child routes as needed
        ]
    }
];
	

10. Получение информации о маршруте.

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

В этом примере мы настроили маршруты для перехода с списка блог-постов на страницу с подробностями о конкретном посте. BlogDetailComponent использует свойство @Input postId для получения ID из маршрута, получает детали с использованием BlogService и отображает информацию.

В конфигурации маршрутизации вашего приложения используйте функцию withComponentInputBinding с методом provideRouter. Это позволит передавать информацию от одного компонента к другому через маршрут.

	
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { appRoutes } from './app.routes'; 

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes, withComponentInputBinding())]
};
	

В вашем компоненте BlogListComponent, когда пользователь нажимает на запись блога для просмотра деталей, перейдите на маршрут blog/:postId:

	
viewBlogDetails(postId: string) {
	this.router.navigate(['/blog', postId]);
}
	

В компоненте, где вы хотите получить информацию, определите свойство @Input(), совпадающее с именем параметра, который вы хотите получить.

	
export class BlogDetailComponent {
  @Input() set postId(postId: string) {
    this.post$ = this.blogService.getBlogPost(postId);
  }

  post$!: Observable<BlogPost | undefined>;

  constructor(private blogService: BlogService) {}
}
	

Исходник приложения можно посмотреть в GitHub: github.com/MaxiDeBox/ng17-angular-routing-example