Ionic Angular 路由器组件缓存问题
Ionic Angular router component caching issue
目前，我正在开发一个 Ionic 5 应用程序 Angular 9（单页应用程序），我遇到了一些关于 routing/component 缓存的问题（至少那是我的想法）并且需要一些帮助。我会尽我所能解释我的情况，以便您能够理解我正在与之抗争的概念和问题。
我有一个页面，上面有 2 个 <ion-tab-bar> 控件/选项卡（活动和非活动）。在活动选项卡上，我列出了数据库中设置了 'active' 标志的产品，而在非活动选项卡上，我列出了相反的产品。
在这些选项卡上，产品以 list-oriented 方式显示，样式为 cards/card 组件。
单击卡片后，我将用户导航到显示产品详细信息的新页面 (/active/:id)。在其他功能中，有一个按钮可将产品标记为非活动状态。通过单击此按钮，我进行了 api 调用，将产品标记为数据库中的非活动状态。
此外，此页面包含一个 <ion-back-button> 按钮组件，可让我返回到我所在的上一页。
问题
我的问题是，当我将产品标记为非活动时，它会更改其在数据库中的状态，但是当我单击后退按钮并 return 到活动选项卡时，我标记的产品因为 Inactive 仍在 Active 选项卡下，我注意到正在调用 none 生命周期方法 ，也没有执行 api 调用以刷新列表。
在此之后，当我转到“非活动”选项卡时，现在我的产品显示在这里，当我再次切换到“活动”选项卡时，它不再在“活动”选项卡下，这是我最初期望的。
这种行为不仅在我通过后退按钮导航时发生，而且在我通过 header 导航导航时也会发生（因此，我认为这与从中呈现页面无关位置记录）。
我在下面张贴一张图片，直观地表示了问题。
任何suggestions/guidelines将不胜感激。
提前致谢。
背景：
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.
让我们知道哪种方法适合您。
目前，我正在开发一个 Ionic 5 应用程序 Angular 9（单页应用程序），我遇到了一些关于 routing/component 缓存的问题（至少那是我的想法）并且需要一些帮助。我会尽我所能解释我的情况，以便您能够理解我正在与之抗争的概念和问题。
我有一个页面，上面有 2 个 <ion-tab-bar> 控件/选项卡（活动和非活动）。在活动选项卡上，我列出了数据库中设置了 'active' 标志的产品，而在非活动选项卡上，我列出了相反的产品。
在这些选项卡上，产品以 list-oriented 方式显示，样式为 cards/card 组件。
单击卡片后，我将用户导航到显示产品详细信息的新页面 (/active/:id)。在其他功能中，有一个按钮可将产品标记为非活动状态。通过单击此按钮，我进行了 api 调用，将产品标记为数据库中的非活动状态。
此外，此页面包含一个 <ion-back-button> 按钮组件，可让我返回到我所在的上一页。
问题
我的问题是，当我将产品标记为非活动时，它会更改其在数据库中的状态，但是当我单击后退按钮并 return 到活动选项卡时，我标记的产品因为 Inactive 仍在 Active 选项卡下，我注意到正在调用 none 生命周期方法 ，也没有执行 api 调用以刷新列表。
在此之后，当我转到“非活动”选项卡时，现在我的产品显示在这里，当我再次切换到“活动”选项卡时，它不再在“活动”选项卡下，这是我最初期望的。
这种行为不仅在我通过后退按钮导航时发生，而且在我通过 header 导航导航时也会发生（因此，我认为这与从中呈现页面无关位置记录）。
我在下面张贴一张图片，直观地表示了问题。
任何suggestions/guidelines将不胜感激。 提前致谢。
背景：
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.
让我们知道哪种方法适合您。