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

Question

当用户点击 ion-back-button 时，我想停止从一个页面导航到另一个页面。我有一些验证/检查要执行，具体取决于哪个应用程序将决定是否允许返回操作。

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：在进入视图之前触发，允许您控制视图是否可以访问（返回真或假）。

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

重要的是要强调 Nav Guard 在任何其他生命周期事件方法之前执行。

Answer 3

我找不到仅控制器的解决方案（ionViewCanLeave 未触发） - 我当前的 hack 如下。它有条件地阻止/覆盖 ion-back-button，同时仍然在单击时为按钮设置动画。

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
}