В Angular маршрутизация — это важная функция, позволяющая перемещаться между различными страницами или компонентами в одностраничном приложении (SPA). В этой статье мы рассмотрим различные методы достижения маршрутизации страниц в Angular, а также примеры кода. К концу этой статьи вы получите четкое представление о различных подходах к переходу на другую страницу в Angular.

Метод 1: использование директивы RouterLink
Самый простой и понятный способ перейти на другую страницу в Angular — использовать директиву RouterLink. Эта директива включена в модуль Angular Router и предоставляет декларативный способ определения ссылок на другие маршруты.

<!-- app.component.html -->
<a routerLink="/dashboard">Go to Dashboard</a>

Метод 2: использование метода Router.navigate()
Метод Router.navigate() — это еще один часто используемый подход для программной навигации в Angular. Этот метод позволяет перейти к определенному маршруту, указав путь маршрута в виде строки.

import { Router } from '@angular/router';
// Inside a component or service
constructor(private router: Router) {}
navigateToDashboard() {
  this.router.navigate(['/dashboard']);
}

Метод 3: использование метода Router.navigateByUrl()
Метод Router.navigateByUrl() аналогичен методу Router.navigate(), но позволяет перемещаться по полному URL-адресу или по абсолютному пути.

Метод 3. Использование метода Router.navigateByUrl(). >

import { Router } from '@angular/router';
// Inside a component or service
constructor(private router: Router) {}
navigateToDashboard() {
  this.router.navigateByUrl('/dashboard');
}

Метод 4: использование Router.navigate() с параметрами маршрута
Если вам необходимо передать параметры маршрута во время навигации, вы можете сделать это, предоставив объект, содержащий параметры маршрута, в качестве второго параметра Router.navigate( ) метод.

import { Router } from '@angular/router';
// Inside a component or service
constructor(private router: Router) {}
navigateToProductDetails(productId: string) {
  this.router.navigate(['/products', productId]);
}

Метод 5: использование Router.navigate() с параметрами запроса
Для навигации и передачи параметров запроса в маршрут вы можете предоставить объект, содержащий параметры запроса, в качестве третьего параметра метода Router.navigate().

import { Router } from '@angular/router';
// Inside a component or service
constructor(private router: Router) {}
searchProducts(keyword: string) {
  this.router.navigate(['/search'], { queryParams: { q: keyword } });
}

В этой статье мы рассмотрели несколько способов перехода на другую страницу в Angular. Мы рассмотрели использование директивы RouterLink, метода Router.navigate(), метода Router.navigateByUrl(), а также навигацию с параметрами маршрута и параметрами запроса. Используя эти методы, вы можете легко реализовать маршрутизацию страниц в своих приложениях Angular. Поэкспериментируйте с этими подходами в зависимости от ваших конкретных требований и создавайте динамичные и интерактивные одностраничные приложения.