Question

当用户点击离子后退按钮时，我想停止从一页到另一页的导航。我要根据哪个应用程序决定是否允许后退操作来执行一些验证/检查。

Answer 1

使用IonBackButtonDelegate覆盖功能。这是简单的示例-

import { IonBackButtonDelegate } from '@ionic/angular';

...

export class TestPage {

  @ViewChild(IonBackButtonDelegate, { static: false }) backButton: IonBackButtonDelegate;

  ...
  // Registering
  ionViewDidEnter() {
    console.log('ionViewDidEnter');
    this.setUIBackButtonAction();
  }

  setUIBackButtonAction() {
    this.backButton.onClick = () => {
      // handle custom action here
    };
  }
}

Answer 2

这可以通过Ionic Life Cyle Hooks

完成

ionViewDidLoad ：仅在将视图存储在内存中时触发。进入已缓存的视图时不会触发此事件。这是执行初始化相关任务的好地方。 ionViewWillEnter：进入页面时会触发，直到成为活动页面为止。每次进入视图时都将其用于要执行的任务（设置事件侦听器，更新表等）。

ionViewDidEnter ：在进入活动页面后进入该页面时触发。与上一个非常相似。

ionViewWillLeave ：离开页面时触发，直到该页面不再是活动页面为止。将其用于每次离开页面时需要运行的功能（停用事件监听器等）。

ionViewDidLeave ：离开页面后，当该页面不再是活动页面时触发。与上一个相似。

ionViewWillUnload ：在要完全删除视图时（在离开非缓存视图之后）触发。

作为奖励曲目，还有其他两种与这些事件相关的强大方法：海军卫队。这些方法集中于视图访问控制（具有身份验证目的）。

海军后卫队 如果要阻止用户离开视图，则：

export class MyClass{
 constructor(
   public navCtrl: NavController
  ){}

  pushPage(){
    this.navCtrl.push(DetailPage);
  }

  ionViewCanLeave(): boolean{
   // here we can either return true or false
   // depending on if we want to leave this view
   if(isValid(randomValue)){
      return true;
    } else {
      return false;
    }
  }
}

ionViewCanEnter ：在进入视图之前触发，可让您控制是否可以访问视图（返回true或false）。

ionViewCanLeave ：在离开视图之前触发，可让您控制是否可以保留视图。

重要的是要突出显示Nav Guards在任何其他生命周期事件方法之前执行。

Answer 3

我找不到仅控制器的解决方案（ionViewCanLeave未触发）-我当前的破解如下。它有条件地防止/覆盖离子后退按钮，同时仍使单击时的按钮处于动画状态。

HTML：

<ion-back-button defaultHref="/" routerDirection="back">
    <div (click)="back($event)"></div>
</ion-back-button>

SCSS：

ion-back-button {
    & > div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}

TS：

public back($event) {
    if (shouldPreventBack)
        $event.stopPropagation();
}

Answer 4

尝试一下：

HTML：

 <ion-buttons slot="left">
            <ion-back-button (click)="BackButtonAction()">Back</ion-back-button>
 </ion-buttons>

TS：

BackButtonAction(){
    //action to be performed on back button
}

如何使用角度7覆盖离子4中的离子后退按钮动作

4 个答案: