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

Метод 1: базовое использование
Самый простой способ использовать queryParams — передать объект функции router.navigate(). Каждая пара ключ-значение в объекте представляет параметр запроса.

import { Router } from '@angular/router';
constructor(private router: Router) {}
// Example usage
navigateWithQueryParams() {
  const queryParams = { page: 1, sortBy: 'name' };
  this.router.navigate(['/target-route'], { queryParams });
}

Метод 2: объединение QueryParams
Если вы хотите объединить текущие параметры запроса с новыми при навигации, вы можете использовать опцию queryParamsHandling.

navigateWithMergedQueryParams() {
  const newQueryParams = { filter: 'active' };
  this.router.navigate(['/target-route'], { queryParams: newQueryParams, queryParamsHandling: 'merge' });
}

Метод 3. Удаление QueryParams
Чтобы удалить определенные параметры запроса во время навигации, вы можете использовать параметр queryParamsHandling со стратегией «слияния».

navigateWithRemovedQueryParams() {
  const queryParamsToRemove = ['sortBy'];
  this.router.navigate(['/target-route'], { queryParamsHandling: 'merge', queryParams: { }, preserveFragment: true });
}

Метод 4: сохранение фрагмента
По умолчанию при навигации с помощью queryParams фрагментная часть URL-адреса отбрасывается. Чтобы сохранить фрагмент, используйте параметр saveFragment.

preserveFragmentExample() {
  const queryParams = { page: 1 };
  this.router.navigate(['/target-route'], { queryParams, preserveFragment: true });
}

Метод 5: относительная навигация
В некоторых случаях вам может потребоваться навигация относительно текущего маршрута. Параметр относительныйTo позволяет добиться этого.

relativeNavigationExample() {
  const queryParams = { page: 1 };
  this.router.navigate(['../', 'target-route'], { queryParams, relativeTo: this.route });
}

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