Метод 1: router.navigate()

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

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

В этом примере вызов метода navigateToHomePage()приведет пользователя к маршруту /home.

Метод 2: router.navigate() с параметрами маршрута

Иногда нам необходимо передать параметры вместе с маршрутом. Angular Router предоставляет способ добиться этого, передав объект в качестве второго параметра методу router.navigate(). Давайте посмотрим пример:

navigateToProductDetails(productId: number) {
  this.router.navigate(['/products', productId]);
}

В этом примере вызов метода navigateToProductDetails()с определенным productIdприведет пользователя к соответствующей странице сведений о продукте.

Метод 3: router.navigateByUrl()

Метод router.navigateByUrl() — альтернатива router.navigate(), которая позволяет переходить по полному URL-адресу. Этот метод может быть полезен, когда вам нужно перейти к внешнему URL-адресу или URL-адресу за пределами конфигурации маршрута приложения. Вот пример:

navigateToExternalURL() {
  this.router.navigateByUrl('https://www.example.com');
}

В этом примере вызов метода navigateToExternalURL()приведет пользователя к указанному внешнему URL-адресу.

Метод 4: router.navigate() с параметрами запроса

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

navigateToSearchResults(query: string) {
  this.router.navigate(['/search-results'], { queryParams: { q: query } });
}

В этом примере вызов метода navigateToSearchResults()с определенным queryприведет пользователя к странице результатов поиска с соответствующим параметром запроса.

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

Не забудьте использовать возможности Angular Router для улучшения пользовательского опыта и создания надежных веб-приложений!