Управление параметрами запроса в Angular

Question

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

Я попытался найти хорошее решение о том, как правильно управлять и синхронизировать их c со значениями, установленными в службах, но кажется, что доступных решений не так много, поэтому я придумал собственный.

Я придумал службу, которая скрывает детали реализации от потребителей , поэтому они не знают, что выполняется дополнительная обработка данных, поэтому они могут использовать эти значения как обычно:

export class ValueService {
  private value: number;
  private valueSource: BehaviorSubject<number>;
  value$: Observable<number>;

  constructor(private route: ActivatedRoute, private router: Router) {
    const valueParam = this.route.snapshot.queryParams?.value;

    if (valueParam) {
      this.value = valueParam;
    } else {
      this.value = 5;
      this.router.navigate([window.location.pathname], {
        queryParamsHandling: 'merge',
        queryParams: { value: this.value },
        replaceUrl: true,
      })
    }

    this.valueSource = new BehaviorSubject<number>(this.value);
    this.value$ = this.valueSource.asObservable();
  }

updateValue(value: number) {
    this.valueSource.next(value);
    this.value = value;
    this.router.navigate([window.location.pathname], {
      queryParamsHandling: 'merge',
      queryParams: { value: this.value },
    })
  }

  getValue(): number {
    return this.value;
  }
}

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

Например, у меня есть value = 5 и value2 = 7. В параметрах запроса мой результат будет ?value=5, а не ?value=5&value=7

Я смог исправить это, обернув this.router.navigate() на setTimeout(), но я не думаю, что это хорошее решение для long run.

Я думаю, проблема в том, что все они срабатывают одновременно, а не последовательно. Есть ли способ заставить его запускаться один за другим? Может быть, есть лучший способ обрабатывать параметры запроса в Angular?

Здесь вы можете найти воспроизведение проблемы: https://codesandbox.io/s/determined-field-2t9pl?file= / src / app / services / value.service.ts