Ionic 4 路由器以编程方式销毁页面答案

【问题标题】：Ionic 4 router destroy page programmaticallyIonic 4 路由器以编程方式销毁页面
【发布时间】：2019-10-23 18:12:51
【问题描述】：

我的应用上有一个注册流程。在每个步骤中，我都不希望用户能够转到上一页，但是，离子使这些页面保持“活动”状态，并且用户可以通过从左向右滑动或使用后退按钮返回他们的电话。

我使用 ionic 的路由系统转换每个用户：

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

我也试过了：

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

和：

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

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

有没有办法使用 ionic 的路由器系统来破坏页面或禁止在一些页面上向后导航？任何建议都会很棒。谢谢。

【问题讨论】：

我认为它适用于 skipLocationChange 但不适用于根页面。所以从root，导航到另一条路线，然后从那时起，历史将被替换

标签： angular ionic-framework ionic4 angular-router

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

在构造函数中注入 navController。

  constructor(
    private navCtrl: NavController,
  ) {
  }

然后使用navigateroot，会破坏之前的页面

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

浏览以下文档

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

【讨论】：

NavController 已弃用

【解决方案3】：

你可以使用route-guard

这是一个很好的例子，通过它

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

在你的routing module 添加

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

让你的简单路线更简单

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();
  }
}

【讨论】：