Ionic 在离开后不会破坏页面

Question

由于工作上的一些需要，我开始使用 Ionic（TypeScript + Angular），我以前从未为移动设备编写过代码，这是我第一次。

我遇到了一个问题，我不知道如何解决它，让我尝试解释一下流程：

流程1

1. 用户A使用其用户/密码登录
2. 用户A登录后重定向至个人资料页面
3. 用户A注销

流程2

1. UserB 使用其用户/密码登录
2. UserB 登录后被重定向到个人资料页面（他看到 UserA 个人资料信息）

注意事项

我正在使用@ionic/storage存储会话但与存储问题无关，我知道，因为注销后我尝试await session.get('user')并且它返回未定义，并且新登录后，我await session.get('user')，它显示了正确的用户（刚刚连接的用户）

我认为它是什么？

我认为 ionic 将页面保存在缓存上，当新用户签署方法 constructor 和 ngOnInit 时，不会再次调用...变量保留旧用户数据，视图呈现错误信息.

我有点确定这是问题所在，因为并非每次都会发生此错误，有时所有内容都会按其应有的方式呈现，但我不知道该怎么办：/

问题

有人已经遇到这个问题了吗？您采取了什么措施来解决这个问题？

我有办法告诉 ionic 不要将页面保留在缓存中吗？

有没有办法强制在router.navigate()到另一个页面后销毁最后的内容？

Answer 1

默认情况下，Ionic 不会销毁页面 - 它将它们保留在 DOM 中，以便通过后退/前进按钮启用移动。在普通 Angular 路由中，您可以通过 RouteReuseStrategy 控制它，但如果您使用 ion-router-outlet，则不能。 ion-router-outlet 实现了一个存储导航历史记录的堆栈，并且仅在创建组件后才运行 Ionic 生命周期挂钩。你可以使用navigateRoot()来清除这个堆栈，或者切换到Angular的router-outlet和router。

我认为这是一个重大缺陷，并且没有得到足够的记录。在很多情况下，不希望将渲染的组件无限期地存储在 DOM 中，并且可能会对性能产生重大影响。

Answer 2

我使用 Ionic 4 Angular 8 也遇到了同样的问题。当用户单击注销时，我使用

{ replaceUrl: true }

修复了它。例如：

logout() {
    ...
    this.router.navigate(["login"], { replaceUrl: true });
}

Answer 3

由于页面转换/状态原因，Ionic 有时会在 DOM 中保留太多页面。因此，您可以使用生命周期方法在“重新进入”页面时重置页面的状态。每次用户导航到页面时，无论页面是否已经在 DOM 中，IonViewWillEnter 生命周期方法都会触发。 有关事件的用法，请参阅此处：https://ionicframework.com/docs/angular/lifecycle

Answer 4

如果将

<ion-router-outlet></ion-router-outlet>

替换为

<router-outlet></router-outlet>

。 Angular 的所有生命周期挂钩都将开始工作，您可以轻松实现您的要求，但它可能适合也可能不适合标志性项目。

取而代之的是，你可以在构造函数中添加一个导航检查的路由器事件，并且可以在一定程度上进行进一步的实现。

例如

this.router.events.subscribe((event : NavigationEnd) => {
  ...
})

第二种方法：

Ionic 有“页面”而不是模块。 所以你必须使用

ionic generate page pageName

来创建页面/模块。
所有离子生命周期挂钩都将在其中工作，如

ionViewWillEnter

、

ionViewDidLeave

等。因此，对于主页，您可以创建

layout

页面（仪表板、其他模块）和

auth

用于登录/注销/忘记密码等。

将所有代码从

ngOnit

剪切/粘贴到

ionViewWillEnter

，它将正常工作。

注意：Ionic Components 生命周期钩子可能无法正常工作。因此，请考虑 Pages 的最大用例。