Как создать универсальный способ установки параметров в роутинг Angular?

В Angular существует несколько способов установки параметров в роутинг, и выбор конкретного способа зависит от требований и особенностей вашего проекта. Вот несколько универсальных способов установки параметров в роутинг Angular:

1. Query параметры:
Query параметры позволяют передавать данные через URL. Для установки query параметров в роутинге Angular вы можете использовать queryParams метод объекта NavigationExtras. Например:

   import { Router, NavigationExtras } from '@angular/router';

   // ...

   constructor(private router: Router) {}

   navigateToPageWithParams() {
     const params: NavigationExtras = {
       queryParams: { key1: 'value1', key2: 'value2' }
     };
     this.router.navigate(['page'], params);
   }

В этом примере мы устанавливаем query параметры key1 и key2 со значениями value1 и value2 соответственно. При переходе на страницу page в URL добавятся соответствующие query параметры.

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

   import { Router } from '@angular/router';

   // ...

   constructor(private router: Router) {}

   navigateToPageWithParams() {
     const id = 123;
     this.router.navigate(['page', id]);
   }

Здесь мы определяем маршрут page/:id, где :id - это плейсхолдер для параметра id. Затем мы передаем значение 123 при использовании navigate метода, чтобы перейти на страницу page/123.

3. Состояние роутера:
Еще один способ установки параметров в роутинг Angular - использование состояния роутера. Состояние роутера позволяет хранить пользовательские данные вместе с текущим маршрутом. Например:

   import { Router } from '@angular/router';

   // ...

   constructor(private router: Router) {}

   navigateToPageWithParams() {
     const params = { key1: 'value1', key2: 'value2' };
     this.router.navigate(['page'], { state: params });
   }

В этом примере мы устанавливаем параметры key1 и key2 со значениями value1 и value2 в состояние роутера. При переходе на страницу page вы можете получить эти параметры из состояния роутера.

В зависимости от требований вашего проекта вы можете выбрать любой из этих способов для установки параметров в роутинг Angular.