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

Что такое QueryParams.
Параметры запроса — это пары ключ-значение, добавляемые в конец URL-адреса и разделенные символом ?. Обычно они используются для передачи данных от одного компонента к другому или для управления определенными функциями внутри компонента. Например, рассмотрим URL example.com/products?id=1&category=electronics. Здесь idи category— параметры запроса.

Метод 1: базовое использование router.navigateByUrl:
Метод router.navigateByUrlиспользуется для перехода к указанному URL-адресу с сохранением параметров запроса. Вот пример, демонстрирующий базовое использование:

import { Router } from '@angular/router';
constructor(private router: Router) {}
...
navigateToProductDetails(productId: string) {
  this.router.navigateByUrl(`/products/${productId}`);
}
...

В приведенном выше примере метод navigateToProductDetailsпринимает productIdв качестве параметра и переходит к URL-адресу /products/{productId}.

Метод 2. Добавление параметров запроса.
Чтобы добавить параметры запроса к URL-адресу, нам нужно создать строку URL-адреса с желаемыми параметрами запроса и передать ее в router.navigateByUrl. Вот пример:

import { Router } from '@angular/router';
constructor(private router: Router) {}
...
navigateToProductDetails(productId: string) {
  const queryParams = { id: productId, category: 'electronics' };
  const url = `/products?${Object.keys(queryParams).map(key => `${key}=${queryParams[key]}`).join('&')}`;
  this.router.navigateByUrl(url);
}
...

В этом примере мы создаем объект queryParamsс нужными параметрами запроса. Затем мы преобразуем объект в формат строки запроса с помощью функций Object.keysи map. Наконец, мы создаем URL-адрес с параметрами запроса и переходим к нему с помощью router.navigateByUrl.

Метод 3: изменение существующих параметров запроса.
Иногда нам может потребоваться изменить существующие параметры запроса во время навигации. Для этого мы можем использовать сервис RouterAngular и опцию queryParamsHandling. Вот пример:

import { Router, ActivatedRoute } from '@angular/router';
constructor(private router: Router, private route: ActivatedRoute) {}
...
updateQueryParams() {
  const queryParams = { page: '2' };
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams,
    queryParamsHandling: 'merge'
  });
}
...

В этом примере метод updateQueryParamsобновляет параметр запроса pageдо 2. Параметр queryParamsHandling, установленный на 'merge', гарантирует сохранение существующих параметров запроса при добавлении или изменении указанных параметров.

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

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