Ionic 4 - Angular 6：如何控制Ionic router history停止缓存视图组件？

Question

也许我遗漏了什么，但我遇到了以前访问过的 Ionic 缓存视图的问题，阻止了组件被 Angular 重新初始化。这些组件是从一些缓存中提取的，并呈现为以前存在的任何数据。

示例：

用户 A 登录到应用程序并从 'Home' 页面开始，其中包含与用户 A 相关的信息。用户 A 注销并导航至 'Log In'。

用户 B 从同一个应用程序登录并导航到 'Home' 页面。 Ionic 看到 Home 之前（由用户 A）访问过，而不是实例化 'Home'，视图从缓存中提取并显示用户 A 正在访问的所有内容。

我注意到 ion-router-outlet 在导航时添加了页面转换，当导航进入 "forward" 时，此转换向左交换，当导航进入 "backwards" 时向右滑动。此数据似乎是从存储缓存视图的同一历史源中读取的。

长话短说；博士如何控制 Ionic 路由器历史记录（url 树）缓存防止 angular 重新初始化组件的视图？

Answer 1

2 天前遇到过类似问题。我现在正在使用离子生命周期钩子 ionViewWillEnter。通过在这个钩子中强制执行逻辑，我实现了我想要的结果。让我知道这是否有帮助:)

Answer 2

我使用 Ionic 的生命周期挂钩来触发所需的行为来解决我的问题，因为如果之前访问过，Ionic 不会从堆栈中销毁 og init Angular 组件。这是一个较长的主题，Ionic 堆栈控制中的某些内容似乎尚未 100% 修复。以下是我现在经常实施的钩子来使事情正常进行：

ngOnInit
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ngOnDestroy

Answer 3

如果 URL 没有改变，

ionViewWillEnter() 将不会被调用。更改查询字符串在这里也无济于事。我发现的唯一解决方法是向路由添加一个可变参数 - 例如

改变

https://localhost:8100/profile?id=123

至

https://localhost:8100/profile/123

当 123 发生变化时，将调用 ionViewWillEnter 并清除缓存。显然你需要相应地改变路由table

 const routes: Routes = [
 {      
    ...
    {
                path: 'profile/:id',
                component: ProfileComponent,
                pathMatch: 'full',
              },
        ...

Answer 4

缓存页面存储在 ion-router-outlet 中。理论上可以操纵 DOM 并丢弃元素。在设备上切换认证用户的场景中，这些项目绝对应该销毁

在使用缓存清除路由时要非常非常小心。 Ionic 将保留每个缓存失效实例的缓存（请参见图片中的朋友组件），如果您使用 angular，其中每一个都将运行更改检测并消耗更多资源。您将获得错误和零星的 UI 更新，尤其是对于来自 angular 上下文之外的回调。

Ionic 4 - Angular 6：如何控制Ionic router history停止缓存视图组件？

Ionic 4 - Angular 6: How to control Ionic router history to stop cache a view component?

ionic-framework

angular

ionic4