如何使用角度 7 覆盖 ionic 4 中的 ion-back-button 动作

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 来完成

\n\n

ionViewDidLoad：仅当视图存储在内存中时触发。进入已缓存的视图时不会触发此事件。它\xe2\x80\x99s 是初始化相关任务的好地方。\nionViewWillEnter：它\xe2\x80\x99s 在进入页面时触发，然后才成为活动页面。将它用于您每次进入视图时想要执行的任务（设置事件侦听器、更新表等）。

\n\n

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

\n\n

ionViewWillLeave：当您离开页面时触发，然后该页面不再是活动页面。将其用于每次离开页面时需要运行的操作（停用事件侦听器等）。

\n\n

ionView离开：当您离开页面且该页面不再是活动页面时触发。与上一篇类似。

\n\n

ionView将卸载：当视图将被完全删除（离开非缓存视图后）时触发。

\n\n

作为奖励轨道，还有另外两种与这些事件相关的强大方法：导航守卫。这些方法侧重于视图访问控制（具有身份验证目的）。

\n\n

导航守卫\n如果您想阻止用户离开视图：

\n\n

export class MyClass{\n constructor(\n   public navCtrl: NavController\n  ){}\n\n  pushPage(){\n    this.navCtrl.push(DetailPage);\n  }\n\n  ionViewCanLeave(): boolean{\n   // here we can either return true or false\n   // depending on if we want to leave this view\n   if(isValid(randomValue)){\n      return true;\n    } else {\n      return false;\n    }\n  }\n} \n

\n\n

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

\n\n

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

\n\n

需要强调的是，导航守卫是在任何其他生命周期事件方法之前执行的。

\n