Ioni c Angular проблема кеширования компонентов маршрутизатора

Question

В настоящее время я разрабатываю приложение Ioni c 5 с Angular 9 (одностраничное приложение), и у меня возникают некоторые проблемы с маршрутизацией / кэшированием компонентов (по крайней мере, это то, что я думаю) и потребуется небольшая помощь. Я постараюсь объяснить свою ситуацию как можно лучше, чтобы вы могли asp понять концепцию и проблему, с которой я борюсь.

У меня есть одна страница, на которой у меня есть 2 <ion-tab-bar> элементов управления / вкладки (Активные и Неактивные). На вкладке «Активные» я перечисляю продукты из своей базы данных, для которых в базе данных установлен флаг «активен», а на вкладке «Неактивно» я перечисляю противоположные. На этих вкладках продукты отображаются в виде списка в виде карточек / компонентов карточек.

После того, как я нажимаю на карточку, я перехожу пользователя на новую страницу (/ active /: id) на который я показываю детали продукта. Среди других функций есть кнопка, которая помечает продукт как Неактивный. Нажимая эту кнопку, я выполняю вызов API, который помечает продукт как неактивный в базе данных. Кроме того, эта страница содержит компонент кнопки <ion-back-button>, который возвращает меня к предыдущей странице, на которой я был.

Проблема

Моя проблема в том, что когда я помечаю продукт как неактивный , он меняет свое состояние в базе данных, но когда я нажимаю кнопку «Назад» и возвращаюсь на вкладку «Активные», продукт, который я помечен как «Неактивный», все еще находится на вкладке «Активные», и я заметил, что ни один из методов жизненного цикла вызываются , и при этом не выполняется вызов api для обновления sh списка.

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

Такое поведение происходит не только при переходе по кнопке «Назад», но и когда я перемещаюсь по навигации по заголовку (из-за этого я думаю, что это не связано с отображением страницы из истории местоположений).

Я отправляю изображение b elow, который визуально представляет проблему.

Любые предложения / рекомендации приветствуются. Заранее спасибо.

Answer 1

Фон:

Ioni c использует стратегию маршрута, которая сохраняет состояние пользовательского интерфейса во время навигации. По этой причине Ioni c предоставляет методы жизненного цикла для правильного отслеживания изменений представления. К сожалению, эти методы жизненного цикла работают только при переходе между маршрутами одного и того же <ion-router-outlet>.

В приложении Ioni c <ion-tabs> внутренне использует <ion-router-outlet?. Таким образом, методы жизненного цикла, объявленные внутри отдельного компонента вкладки, вызываются только при переходе между вкладками.

В вашем приложении, когда вы переходите к /active/:id, вы по существу выходите из компонента, который содержит <ion-tabs> и переход к компоненту, указанному в маршруте /active/:id. Это изменение представления происходит в <ion-router-outlet>, которое вы специально использовали в своем проекте.

Итак, переходя к решениям, вы можете попробовать два подхода.

1. Используйте методы жизненного цикла Ioni c в компоненте, где используется <ion-tabs>

В компоненте, где вы использовали <ion-tabs>, добавьте метод ionViewWillEnter. Поскольку вы используете ngRx, вы можете вызвать action, чтобы обновить sh список продуктов в состоянии приложения. Таким образом, когда вы находитесь на определенной вкладке c - Активный / Неактивный, у вас будут обновленные данные о продуктах, легко доступные в пользовательском интерфейсе.

2. Подписка на URL-адрес маршрутизатора

В этом подходе вам нужно будет подписаться на URL-адрес маршрутизатора на вкладках «Активный» и «Неактивный». Всякий раз, когда пользовательский интерфейс переходит к указанному маршруту c, мы можем наблюдать за изменениями и обновлять sh список продуктов.

Поскольку я не использовал ngRx в своем проекте, мне пришлось использовать второй подход чтобы обновить sh данные в моем приложении. Полный код для второго подхода упоминается здесь .

Сообщите нам, какой подход сработал для вас.