angular - Ionic Angular 路由器组件缓存问题

Question

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

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

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

问题

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

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

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

我在下面发布了一张图片，它在视觉上代表了这个问题。

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

score 3 · Accepted Answer

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

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

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

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

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

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

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

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