Как реализовать кнопку «Назад» в Angular для навигации по предыдущей странице?
У меня есть list-component, где я хочу сохранить значение pageIndex, установив некоторые переменные в другом классе непосредственно перед переходом к другому компоненту, скажем, x-component. Затем при переходе обратно к list-component я хочу получить ранее установленный pageIndex, чтобы открыть эту страницу вместо открытия первой страницы в таблице данных. Итак, как можно элегантно решить эту проблему без использования сервиса или подписки? Я могу использовать другой класс, но не сервис. Я попытался получить заданные значения из класса, но значение pageIndex не определено при попытке получить его.
Любая помощь будет оценена по достоинству.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать sessionStorage.
В x-component сохраните pageIndex с этим.
sessionStorage.setItem('pageIndex', pageIndex);
Затем загрузите это значение в list-component вот так.
public pageIndex = Number(sessionStorage.getItem('pageIndex') ?? 0);
import { Location } from '@angular/common';
previousUrl: string;
constructor(private location: Location,private router: Router){ }
goBackFunction(){
router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {
console.info('prev:', event.url);
this.previousUrl = event.url;
});
this.location.back()
}
Вы попадете на предыдущую страницу :)
@Fredrick Я отредактировал новый код, проверь их
Я думаю, что есть недоразумение. Есть 2 компонента, и у меня есть некоторые параметры в компоненте списка. Затем перейдите к компоненту сведений. И при повторном возвращении на страницу списка мне нужно получить ранее заданные параметры. Но вы только что дали реализацию компонента деталей, чтобы он возвращался без восстановления каких-либо параметров.
Помните, что в этом сценарии есть пограничный случай, когда пользователь открывает новую вкладку, в истории не будет записи, к которой можно вернуться. Это может вывести пользователя из приложения Angular, а также вызвать проблемы с безопасностью, поскольку нет API для прямой проверки истории браузера.
Вы также можете использовать pageIndex в качестве параметра URL страницы, на которой отображается list-component.
Вставьте в свой ctor:
private route: ActivatedRoute
Затем в вашем ngOnInit сделайте что-то вроде:
this.route.params.subscribe((params: any) => {
if (params.pageIndex) {
this.pageIndex = params.pageIndex;
}
});
В вашем модуле маршрутизации ваш URL должен соответствовать: some-url/:pageIndex. И при переходе назад и вперед в списке URL-адрес должен обновляться соответствующим образом.
Спасибо, но я не уверен, где мне применять эти блоки кода. Вы имеете ввиду передать все параметры в x-component и подписать параметры маршрута в list-component?
@ Фредрик, нет, вам не нужно передавать параметры в x-component, потому что, когда вы возвращаетесь назад, вышеуказанная подписка на параметры URL гарантирует, что pageIndex получит последнее значение, а не сбрасывается на первую страницу.
Спасибо, а где мне установить параметр pageIndex? Когда я устанавливаю этот параметр в компоненте списка, а затем я не уверен, должен ли я передать некоторые другие параметры из компонента сведений. Я использую this._location.back(); для перехода назад без передачи каких-либо параметров.
С другой стороны, мне интересно, что вместо того, чтобы передавать параметры из списка в детали, а затем снова переходить из деталей в список, было бы лучше сохранить эти параметры в компоненте списка (возможно, через класс), а затем получить их методом onInit списка без каких-либо изменений в компоненте сведений?
Кстати, большое спасибо за вашу ценную помощь и голосование;)
@Fredrick, pageIndex находится в URL-адресе, поэтому при возврате со страницы сведений (компонент) путем вызова location.back()list-component будет анализировать URL-адрес (как показывает мой код выше) и творить чудеса. Поэтому странице сведений не нужно получать/отправлять какие-либо параметры.
На этот раз все в порядке. Но думаю параметры будут видны в адресной строке думаю. Это правда? Я избегаю этого и передаю параметры. Возможно ли это в вашем подходе?
@Fredrick yes URL = адресная строка. Зачем избегать? Одним из плюсов включения его в URL-адрес является то, что если вы обновите страницу, вы получите правильный pageIndex. В противном случае он будет сброшен. URL-адрес помогает вам сохранить состояние
Давайте продолжим обсуждение в чате.
Как насчет метода back() на странице сведений? Как мне это реализовать?
Как насчет получения параметров, которые были установлены ранее в
list-component?