Обработка нескольких параметров запроса в Angular
Я использую вкладки Angular Material и хочу сохранить выбранную вкладку в URL-адресе, используя параметры запроса (у меня только 2 вкладки). Кроме того, когда я нахожусь на вкладке 1, у меня должно быть 2 параметра запроса: один для выбранной вкладки и новый для другого выбранного значения (inspectionChecklistId). Моя проблема в том, что когда я нахожусь на второй вкладке, я пытаюсь обновить существующий параметр (selectedTab) и в то же время добавить новый (inspectionChecklistId), потому что первый не обновляется. Я должен упомянуть, что я использую метод для обновления параметров запроса.
Я использую этот метод для обновления параметра запроса:
updateQueryParams(name: string, value: number){
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams: {
[name]: value
},
queryParamsHandling: "merge"
});
}
И я попытался обновить параметры запроса следующим образом: В конструкторе я вызвал метод только один раз с выбранным параметром вкладки:
constructor(private router: Router, private activatedRoute: ActivatedRouter) {
this.updateQueryParams('selectedTab', 0);
}
В методе, который вызывается каждый раз при изменении вкладки, я сделал что-то вроде этого:
onSelectedIndexChanged(index: number){
this.updateQueryParams('selectedTab', index);
if (index === 1) {
this.updateQueryParams('inspectionChecklistId', -1);
} else {
this.updateQueryParams('inspectionChecklistId', null);
}
}
Я также попытался изменить updateQueryParams следующим образом:
updateQueryParams(...queryParams) {
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams: {
...queryParams
},
queryParamsHandling: "merge"
});
}
и используя такой метод:
onSelectedIndexChanged(index: number) {
if (index === 1) {
this.updateQueryParams(
{ name: "selectedTab", value: index },
{ name: "inspectionChecklistId", value: -1 }
);
} else {
this.updateQueryParams({ name: "inspectionChecklistId", value: null });
}
}
но, используя тип распространения, неправильно добавлять весь массив queryParams, как я, и я не знаю, как добавить каждый элемент отдельно.
Итак, что я хочу иметь:
-tab 0 is selected (the first one) => localhost:4200/?selectedTab=0
-tab 1 is selected (the second one) => localhost:4200/?selectedTab=1&inspectionChecklistId=-1
Но теперь selectedTab не меняется.
Ответы 1
Вам не нужно использовать типы распространения, просто передайте параметр типа Параметры:
updateQueryParams(queryParams) {
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams,
queryParamsHandling: 'merge'
});
}
В вашем конструкторе передайте объект params:
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.updateQueryParams({selectedTab: 0});
}
При изменении вкладки вызовите функцию только один раз, передав оба параметра запроса:
onSelectedIndexChanged(index: number) {
const inspectionChecklistId = index === 1 ? -1 : null;
this.updateQueryParams(
{
selectedTab: index,
inspectionChecklistId
}
);
}