typescript 离子不破坏页面后离开它

00jrzges  于 2023-03-31  发布在  TypeScript
关注(0)|答案(4)|浏览(143)

我开始使用Ionic(TypeScript + Angular),因为我的工作需要,我以前从来没有为移动的编写过代码,这是我第一次。
我遇到了一个问题,我不知道如何解决它,让我试着解释一下流程:

流程一

1.用户A使用用户/密码登录
1.UserA登录后跳转到个人资料页面
1.用户A退出

流程二

1.用户B使用其用户/密码登录
1.用户B登录后跳转到个人资料页面(看到***用户A***个人资料信息)

注意事项

我使用@ionic/storage存储会话但与存储问题无关,我知道这一点,因为注销后我尝试 await session.get('user'),它返回undefined,新登录后我 await session.get('user'),它显示正确的用户(刚刚连接的用户)

我想的是什么?

我认为ionic在该高速缓存中保存页面,当新用户签署方法构造函数ngOnInit时,不会再次调用...变量与旧用户数据保持一致,视图呈现错误的信息。
我有点确定这就是问题所在,因为并不是每次这个bug发生时,有时候所有的东西都是按照它应该在第一时间呈现的,但我不知道该怎么办:

问题

有人已经遇到了这个问题?您是如何解决这个问题的?
有一种方法让我告诉离子不保留在缓存页面?
有一种方法可以在router.navigate()之后强制销毁最后一个内容到另一个页面?

k5ifujac

k5ifujac1#

默认情况下,Ionic不会销毁页面-它会将页面保存在DOM中,以便通过后退/前进按钮进行旅行。在vanilla Angular路由中,您可以通过RouteReuseStrategy控制这一点,但如果您使用的是ion-router-outlet,则不能。ion-router-outlet实现了一个存储导航历史的堆栈,并且只会在创建组件后运行Ionic生命周期钩子。您可以使用navigateRoot()来清除此堆栈,或者切换到Angular的router-outlet和router。
在我看来,这是一个严重的缺陷,并且没有很好地记录。在许多情况下,不希望将渲染的组件无限期地存储在DOM中,并且可能会对性能产生重大影响。

5t7ly7z5

5t7ly7z52#

我在使用Ionic 4 Angular 8时也遇到了同样的问题。当用户点击注销时,我使用{ replaceUrl: true }修复了这个问题。例如:

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

tzcvj98z3#

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

p8ekf7hl

p8ekf7hl4#

如果你用<router-outlet></router-outlet>替换<ion-router-outlet></ion-router-outlet>,angular的所有生命周期钩子都将开始工作,你可以轻松地实现你的需求。

相关问题