Ionic 4 Angular 路由器导航并清除上一页的堆栈/历史记录

Posted 2023-03-13

【中文标题】Ionic 4 Angular 路由器导航并清除上一页的堆栈/历史记录

【英文标题】：Ionic 4 Angular router navigate and clear stack/history of previous page

【发布时间】：2019-07-30 03:50:01

【问题描述】：

我正在使用带有 Angular 路由器的 Ionic 4 开发应用程序。我想导航到另一个页面并清除页面堆栈。在 android 原生中，它是这样的：

Intent intent = new Intent(NewActivity.this, MainActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);

从我目前阅读的内容来看，可以使用Ionic NavController，但它在 Ionic 4 中已被弃用。我通过 routerLink 了解了按钮，但如果我没记错的话，使用该应用程序将立即导航到另一个页面。在导航到另一个页面之前，我需要执行一些逻辑。

例如：登录页面。成功登录后，用户应该无法返回登录页面。此外，通过单击“登录”按钮，它应该调用一个函数来处理登录并决定导航/不导航到另一个页面。

有什么方法可以使用 Angular 路由器实现这一点，还是需要依赖已弃用的 Ionic NavController？

【问题讨论】：

为了这个问题我不得不跪在NavController。它没有完全弃用，你仍然可以使用它。否则你可以使用ionViewWillLeave() 清空你的堆栈。

@Najamussaqib 我想在我找到 Angular 路由器的解决方案之前，我现在只使用NavController

【参考方案1】：

例如一个登录页面，它是一个根页面（'/login'），点击登录按钮后导航到一个新页面，如下所示：

onLogin() 
   this.router.navigateByUrl('/profile',  replaceUrl: true ) 

它将页面历史记录条目替换为新的 URL，在本例中为 '/profile'。使用普通的<ion-back-button></ion-back-button> 或浏览器的后退按钮后，您将不会被重定向到登录页面而是前一页。假设您的页面导航是这样的：home -> login -> profile，但历史记录只会记住 home -> profile，因此在 处点击返回按钮>个人资料页面将带您回家。

要获得完整的解决方案，您可以将其与 Angular Route Guards 结合使用，以防止基于某些条件（例如用户已登录）访问页面。可以在this answer 中找到如何操作的提示。

【讨论】：

我的情况是，假设我在 X 页面中，在某些情况下我使用 navigateByUrl 导航到 Y 页面。现在如果我点击返回按钮从 Y 页，我不应该去 X 页。我一定要去其他页面。我有一个想法，比如清除导航堆栈并以编程方式将页面添加到堆栈中，但我没有找到任何材料。你能推荐点什么吗？

【参考方案2】：

this.router.navigateByUrl('/login',  skipLocationChange: true );

在不将新状态推入历史的情况下进行导航。

https://angular.io/api/router/NavigationExtras

【讨论】：

它在浏览器上工作，但在部署到设备时不能工作。我想知道为什么.. 我需要它在设备上工作。

更新：它确实有效，但不在根页面上。假设登录页面是我的根页面，我正在从登录页面导航到主页，它不会工作。登录页面仍将保留在历史记录中。

skipLocationChange 没有在历史记录中添加 target 页面。如果您想使用replaceUrl 删除历史中的当前页面并将其替换为下一个页面或skipLocationChange，这是一个上下文问题。 skipLocationChange 如果您知道您正在导航到一个临时页面（比如一个不显示导航回的教程屏幕，或者一个将自动重定向的确认屏幕），那么如果您在一个页面上，replaceUrl 非常好。不应再返回的登录页面（如成功登录后）。

【参考方案3】：

尝试了不同的方法，但唯一有效的是

this.navController.navigateRoot('/main/tabs/forms');

我在完成身份验证过程后使用它。