Angular Router меняет состояние, но URL не меняется

Question

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

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

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

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

Не стесняйтесь спрашивать меня, если вы не понимаете мою проблему.

Edit1: Если вы проверите мое демо, есть кнопка. И я ожидаю, что если вы нажмете кнопку, параметр будет добавлен в URL. Каждый раз, когда нажимается кнопка, должен добавляться другой параметр, чтобы URL выглядел следующим образом: https://angular-slnewb.stackblitz.io/?myParameter=0&myParameter=1.

Answer 1

Вы можете попробовать преобразовать массив в строку.

@Injectable()
export class MyDataService {
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

  public getMyUrlParameter(): Observable<string[]> {
    return this.activatedRoute.queryParams.pipe(map(params => {
      const myParameter = params["myParameter"];
      return myParameter ? myParameter.split(',') : [];
    }));
  }

  public setMyUrlParameter(myParameter: string[]): void {
    const customQueryParams = {};
    customQueryParams["myParameter"] = myParameter.toString();
    this.router.navigate([], {
      queryParams: customQueryParams,
      // preserve the existing query params in the route
      queryParamsHandling: "merge"
    });
  }
}

https://stackblitz.com/edit/angular-negcsk?file=src%2Fapp%2Fmy-data.service.ts

Answer 2

Насколько я понимаю, проблема в приведенном вами примере заключается в том, что при нажатии кнопки вы не переходите на другую страницу. Это всегда один и тот же маршрут. Когда вы изменяете маршруты в методе setParameter, он объединяет значения queryParams

public setMyUrlParameter(url: string, myParameter: string[]): void {
    const customQueryParams: Params = {};
    customQueryParams["myParameter"] = myParameter;
    this.router.navigate([url], {
      queryParams: customQueryParams,
      // preserve the existing query params in the route
      queryParamsHandling: "merge"
    });
  }

Я создал здесь рабочий форк - https://stackblitz.com/edit/angular-6-routing-tn8av4