时间戳

首页 > 解决方案 > Ionic 4 Angular 路由器导航并清除上一页的堆栈/历史记录

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

问题描述

我正在使用带有 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？

标签： angularionic-frameworkionic4angular-router

解决方案

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

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

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

对于完整的解决方案，您可以将其与Angular Route Guards结合使用，以防止基于某些条件（例如用户已登录）访问页面。提示如何做到这一点可以在这个答案中找到。

推荐阅读