离子角路由器组件缓存问题

Question

目前，我正在使用 Angular 9（单页应用程序）开发一个 Ionic 5 应用程序，并且我在路由/组件缓存方面遇到了一些问题（至少我是这么认为的）并且会需要一点帮助。我会尽我所能解释我的情况，以便您了解我正在处理的概念和问题。

我有一页上有 2 个<ion-tab-bar> 控件/选项卡（活动和非活动）。在“活动”选项卡上，我列出了我的数据库中在数据库中设置了“活动”标志的产品，而在“非活动”上，我列出了相反的产品。 在这些选项卡上，产品以面向列表的方式显示，样式为卡片/卡片组件。

单击卡片后，我将用户导航到一个新页面 (/active/:id)，在该页面上显示产品详细信息。除其他功能外，还有一个将产品标记为非活动状态的按钮。通过单击此按钮，我正在进行 api 调用，它将产品在数据库中标记为非活动。 此外，此页面包含一个 <ion-back-button> 按钮组件，它可以让我回到上一页。

问题

我的问题是，当我将产品标记为非活动时，它会更改其在数据库中的状态，但是当我单击后退按钮并返回到活动选项卡时，我标记为非活动的产品仍在活动选项卡，我注意到没有调用任何生命周期方法，也没有执行 api 调用以刷新列表。

之后，当我转到非活动选项卡时，现在我的产品显示在此处，当我再次切换到活动选项卡时，它不再在活动选项卡下，这是我最初所期望的。

这种行为不仅在我通过后退按钮导航时发生，而且在我通过标题导航导航时也会发生（因此，我认为这与从位置历史呈现页面无关）。

我在下面发布了一张图片，它直观地代表了问题。

任何建议/指南将不胜感激。 提前致谢。

Answer 1

背景：

Ionic 使用路由策略，在导航时保留 UI 状态。出于这个原因，Ionic 提供了生命周期方法来正确地观察视图的变化。不幸的是，这些生命周期方法仅在同一 <ion-router-outlet> 的路由之间导航时才有效。

在 Ionic 应用程序中，<ion-tabs> 在内部使用 <ion-router-outlet?。因此，在单个选项卡组件中声明的生命周期方法仅在选项卡之间导航时才会被调用。

在您的应用程序中，当您导航到/active/:id 时，您实际上是从包含<ion-tabs> 的组件移出并转到/active/:id 路由中提到的组件。这种观点变化发生在您在项目中专门使用的<ion-router-outlet>。

因此，对于解决方案，您可以尝试两种方法。

1。在使用 <ion-tabs> 的组件中使用 Ionic Lifecycle 方法

在你使用过<ion-tabs>的组件中，添加ionViewWillEnter方法。由于您使用的是 ngRx，您可以调用action 来刷新应用程序状态下的产品列表。 这样，当您在特定选项卡上时 - 活动/非活动，您将可以在 UI 上轻松获得刷新的产品数据。

2。在路由器 URL 上订阅

在这种方法中，您必须在活动和非活动选项卡中订阅路由器 URL。每当 UI 导航到该特定路线时，我们都可以观察变化并刷新产品列表。

由于我没有在我的项目中使用 ngRx，我不得不使用第二种方法来刷新我的应用程序上的数据。第二种方法的完整代码提到了here。

让我们知道哪种方法适合您。