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

1. RouterModule.forRoot():

Метод RouterModule.forRoot() используется для определения маршрутов для приложения Angular. В качестве входных данных он принимает массив объектов Route, где каждый объект Route представляет конфигурацию маршрута. Вот пример:

import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. RouterModule.forChild():

Метод RouterModule.forChild() используется при определении маршрутов для функциональных модулей в Angular. Он похож на RouterModule.forRoot(), но специально разработан для дочерних модулей. Вот пример:

import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'profile', component: ProfileComponent },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

3. RouterLink и RouterLinkActive:

RouterLink — это директива в Angular, которая позволяет создавать ссылки на различные маршруты в вашем приложении. RouterLinkActive — еще одна директива, которая добавляет класс CSS к элементу на основе текущего активного маршрута. Вот пример:

<nav>
  <a routerLink="/" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

4. Router.navigate():

Метод Router.navigate() используется для программного перехода к определенному маршруту в вашем приложении. В качестве входных данных он принимает массив сегментов маршрута. Вот пример:

import { Router } from '@angular/router';
constructor(private router: Router) { }
goToAboutPage() {
  this.router.navigate(['/about']);
}

5. Параметры маршрутизатора:

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

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
  this.route.params.subscribe(params => {
    const id = params['id'];
    // Use the id parameter in your logic
  });
}

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