Сохранение состояния страницы поиска после перехода назад со страницы сведений в Angular

Question

Я новичок в angular, и у меня есть требование поддерживать состояние страницы результатов поиска (то есть сохранять значения сортировки и фильтрации сетки результатов поиска), когда пользователь переходит на страницу сведений, щелкая ссылку в результатах поиска. сетки и снова перейдет на страницу поиска. Я пытался использовать CustomReuseStartegy, но у меня есть 2 проблемы:

1. Необходимо обновить результаты поиска, когда пользователь вносит некоторые изменения на странице сведений.
2. После того, как страница отделена. Это не привязывается снова. (когда пользователь переходит на какую-либо другую страницу (другую страницу, а не страницу с подробностями) и возвращается на страницу поиска, страница не перезагружается.

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

Answer 1

Если вам нужно поддерживать состояние между компонентами (страницами), вы должны использовать сервис.

Сохраните данные в сервисе со страницы поиска и покиньте страницу. Когда вы вернетесь на страницу поиска, получите данные из сервиса.

Кроме того, вы можете хранить данные в localStorage или sessionStorage, если это соответствует вашим требованиям.

Если вы используете Angular 1.x, нажмите здесь.

Для Angular 2+ нажмите здесь.

Answer 2

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

Для этого я использовал Location, чтобы добавить новый элемент в историю платформы.

this.location.go(`/items/${this.category}/${this.color}/`);

Поместил это в модуль маршрутизации:

{ path: 'items/:category/:color/', component: ItemsComponent}
{ path: 'items', component: ItemsComponent}

Затем я использовал маршрут, чтобы увидеть, есть ли параметры:

const category = this.route.snapshot.paramMap.get('category');
const locations = this.route.snapshot.paramMap.get('color');