离子4路由器以编程方式破坏页面

Question

我的应用程序上有一个注册流程。在每一步，我不希望用户能够转到上一页，然而，离子使这些页面“活”，用户可以通过从左向右滑动或使用手机上的后退按钮返回。

我使用离子型路由系统对每个用户进行转换：

 this.router.navigateByUrl('/invite');

我也试过：

 this.router.navigate(['/invite']);

以及：

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

它给我带来了很多问题，我已经做了相当多的谷歌搜索，找不到任何解决方案。

是否有一种方法使用离子的路由器系统破坏一个页面或不允许在某些页面上进行反向导航？任何建议都会很好。谢谢。

Answer 1

您可能已经解决了这个问题，但是您也可以使用以下方法：

this.router.navigateByUrl('/invite',{
 replaceUrl : true
});

Answer 2

你必须使用离子导航，它们提供了功能。

在构造函数中注入navController。

  constructor(
    private navCtrl: NavController,
  ) {
  }

然后使用navigateroot，它将破坏前一页。

this.navCtrl.navigateRoot('/home', { animated: true, animationDirection: 'forward' });

通过下面的文档

https://ionicframework.com/docs/angular/navigation

Answer 3

您可以使用route-guard

这是个很好的例子。

https://alligator.io/angular/route-guards/

在您的routing module添加

const myRoutes: Routes = [
  { path: '', component: yourHomeComponent },
  { path: 'dashboard',
    component: anyComponentComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

做你的简单路线gurd

import { Injectable } from '@angular/core';
import { CanActivate,
         ActivatedRouteSnapshot,
         RouterStateSnapshot } from '@angular/router';

import { MyAuthService } from './auth.service';

@Injectable()
export class _CanActivateRouteGuard implements CanActivate {

  constructor(private auth: MyAuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      return this.auth.isUserAuthenticated();
  }
}