Angular – это мощный инструмент для разработки Front End-приложений, позволяющий создавать сложные и масштабируемые проекты. Однако его богатые возможности иногда требуют вдумчивого подхода. Если ты когда-нибудь пытался реализовать многоуровневую навигацию, то знаешь, что это не просто «взял и сделал».
В этой статье мы подробно разберём, как шаг за шагом настроить такую вещь как Angular маршрутизация, и добавить хлебные крошки (breadcrumbs) для удобства пользователей. А если ты хочешь еще более детально разобраться в Front End-разработке, записывайся на курсы программирования FoxmindEd.
Что такое многоуровневая навигация?
Представь себе приложение, в котором ты переходишь от главной страницы до деталей продукта через несколько категорий. Это и есть пример многоуровневой навигации. Она нужна для:
- Чёткого структурирования маршрутов.
- Удобного интерфейса для пользователей.
- Логического разделения кода, чтобы ты не утонул в своём проекте через пару недель.
В Angular вся магия крутится вокруг Angular Router. Этот модуль позволяет задавать маршруты, связывать их с компонентами и настраивать логику переходов. Давай разберёмся, как это работает.
Шаг 1: Настройка маршрутов
Сначала создадим базовую структуру маршрутов. Для этого нужно в файле app-routing.module.ts описать основные маршруты:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CategoryComponent } from './category/category.component';
import { ProductComponent } from './product/product.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'category/:id',
component: CategoryComponent,
children: [
{ path: 'product/:productId', component: ProductComponent },
]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Что мы тут сделали? Мы настроили маршрут для категории с вложенными маршрутами для продуктов. Это позволяет отображать компонент ProductComponent внутри CategoryComponent.
Шаг 2: Создание хлебных крошек (breadcrumbs)
Теперь добавим Angular breadcrumbs, чтобы пользователь мог видеть, где он находится. Это особенно актуально для приложений с глубокими уровнями вложенности. Для этого создадим сервис:
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class BreadcrumbService {
getBreadcrumbs(route: ActivatedRouteSnapshot, url: string = '', breadcrumbs: Array<any> = []): Array<any> {
const children = route.children;
if (children.length === 0) {
return breadcrumbs;
}
for (const child of children) {
const routeURL = child.url.map(segment => segment.path).join('/');
if (routeURL !== '') {
url += `/${routeURL}`;
}
breadcrumbs.push({
label: child.data['breadcrumb'],
url: url
});
return this.getBreadcrumbs(child, url, breadcrumbs);
}
return breadcrumbs;
}
}Этот сервис позволяет генерировать список крошек на основе текущего маршрута. Теперь добавим данные маршрута в app-routing.module.ts:
const routes: Routes = [
{ path: '', component: HomeComponent, data: { breadcrumb: 'Home' } },
{
path: 'category/:id',
component: CategoryComponent,
data: { breadcrumb: 'Category' },
children: [
{
path: 'product/:productId',
component: ProductComponent,
data: { breadcrumb: 'Product' }
},
]
},
];Шаг 3: Динамическое обновление навигации
Чтобы хлебные крошки динамически обновлялись, внедри сервис в главный компонент:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { BreadcrumbService } from './breadcrumb.service';
@Component({
selector: 'app-root',
template: `
<nav>
<ng-container *ngFor="let breadcrumb of breadcrumbs">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
<span *ngIf="breadcrumb !== breadcrumbs[breadcrumbs.length - 1]"> / </span>
</ng-container>
</nav>
<router-outlet></router-outlet>
`,
})
export class AppComponent implements OnInit {
breadcrumbs: Array<any> = [];
constructor(private breadcrumbService: BreadcrumbService, private router: Router, private route: ActivatedRoute) {}
ngOnInit() {
this.router.events.subscribe(() => {
this.breadcrumbs = this.breadcrumbService.getBreadcrumbs(this.route.root);
});
}
}Теперь при навигации пользователю будут отображаться актуальные хлебные крошки.
Шаг 4: Улучшение UX с помощью lazy loading
Многоуровневая навигация может быть тяжёлой для производительности, особенно если ты грузишь все модули сразу. Используй ленивую загрузку (lazy loading):
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'category/:id',
loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
},
];Так Angular будет подгружать модуль только тогда, когда он реально нужен.
Заключение
Angular navigation может показаться сложной в начале, но как только ты разберёшься в её принципах, настройка маршрутов станет такой же простой и логичной, как рефакторинг небольшого модуля в конце рабочего дня. Помни, что грамотно организованная структура маршрутов упрощает жизнь не только пользователям, но и самим разработчикам, позволяя поддерживать код чистым и масштабируемым.
Хотите узнать больше о создании многоуровневой навигации в Angular? Задайте свой вопрос в комментариях ниже! 🤔👇