У меня есть приложение для инвентаризации (устройство и браузер), где пользователь может вести инвентаризацию деталей для хобби.У меня есть панель инструментов, которая показывает категории деталей (корзины для деталей).Если вы щелкнете по категории, вы увидите детали внутри категории, а затем, если вы нажмете на деталь, вы перейдете на страницу детали.
TL: DR;внизу.
Панель инструментов -> Бункеры -> Деталь
Я работаю с Router
и navigationExtras
, чтобы изменить queryParams
, и у меня возникают некоторые странные проблемы.Я добавляю queryParams к URL, чтобы пользователь мог добавить в закладки или скопировать / вставить URL, если он находится в браузере.
На странице панели инструментов, когда я нажимаю на корзину, я получаю "корзину"Категория "и отправьте это как queryParam
на страницу с корзинами:
goToBin(type) {
const navigationExtras = {
queryParams: {
type: (type) ? type : 'all',
}
};
console.log('Go To Bin:', type, navigationExtras);
this.router.navigate(['dashboard/bins'], navigationExtras);
}
Это прекрасно работает, когда я попадаю на страницу с корзинами, я получаю queryParams и быстро вызываю мой сервис наполучить части в массиве, которые относятся только к этой категории:
ionViewWillEnter() {
this.route.queryParams.subscribe(params => {
console.log('Received on Bin Page:', params);
this.type = params['type'];
});
this.database.initDatabase(); // Only fires when loading this page fresh
this.getBinParts();
}
Это прекрасно работает.Затем на той же странице я отправлю еще один queryParam с идентификатором детали на страницу детали и в основном сделаю то же самое с массивом деталей:
Страница Bins - Отправка queryParams на страницу деталей
goToPart(part) {
const navigationExtras = {
queryParams: {
pid: part.id,
fromBin: true,
}
};
console.log('Go To Part', part, navigationExtras)
this.router.navigate(['dashboard/part'], navigationExtras);
}
Страница деталей, получение параметров из корзины (url)
ionViewWillEnter() {
this.route.queryParams.subscribe(params => {
console.log('Received on Part Page:', params);
this.pid = params['pid'];
this.fromBin = params['fromBin'];
});
this.database.initDatabase(); // Again, only fires if fresh
this.getPart();
}
Затем, возврат к странице корзин из частей:
goBack() {
const navigationExtras = {
queryParams: {
type: this.part.data.type,
}
};
console.log('Go Back To Bins:', this.fromBin, this.part.data.type, navigationExtras);
if (this.fromBin) {
this.router.navigate(['/dashboard/bins'], navigationExtras);
} else {
this.router.navigate(['/dashboard']);
}
}
и возврат к панели инструментов.из бункеров (обратите внимание, что здесь я очищаю queryParams)
goBack() {
const navigationExtras = {}
console.log('Go Back To Dashboard:', navigationExtras);
this.router.navigate(['/dashboard'], navigationExtras);
}
Все работает очень хорошо, если я ТОЛЬКО начинаю со страницы панели инструментов.Я загружаю в соответствующие бункеры и детали просто отлично.
TL; DR: проблема в том, когда я запускаю либо прямо на странице бина, либо на странице детали.Если я перейду непосредственно к бинарной странице (например, / dashboard / bins? Type = антенна), я смогу нормально перейти на панель мониторинга и на правильные страницы деталей, но если перейти к панели мониторинга и выбрать другой блок, я получу толькодетали в исходной корзине, даже если параметры запроса в URL обновлены.
Это происходит, если я сразу же перехожу на страницу деталей, но, кроме того, я не вижу другие детали, если возвращаюсь кстраница деталей с другим идентификатором.
Я вижу, что он не получает новый параметр, который я отправил через журналы консоли.По порядку я посмотрю:
Go To Part {id: "85Xry68VpFN5BMfh9hGu", data: {…}} {queryParams: {…}}
Received on Part Page: {pid: "bHg19fRKW2YNXgzS2Umk", fromBin: "true"}
Как видите, я отправляю идентификатор 85x...
и получаю предыдущий идентификатор bHg...
Кэшируется ли этот queryParam?и если да, то как мне его уничтожить?Кроме того, почему это происходит только тогда, когда я перехожу непосредственно на эти дочерние страницы?