Question

我正在使用Ionic 4和Angular路由器开发一个应用程序。我想导航到另一个页面并清除页面堆栈。在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？

Answer 1

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

导航时不会将新状态推入历史记录。

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

Answer 2

以登录页面为例，该页面是根页面（“ / login”），单击登录按钮后，导航至新页面，如下所示：

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

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

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

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

2 个答案: