在 Ionic 4 中控制的 android 默认后退按钮答案

【问题标题】：android default back button to be controlled in Ionic 4在 Ionic 4 中控制的 android 默认后退按钮
【发布时间】：2019-10-14 22:01:26
【问题描述】：

使用 ionic 4 我创建了一个需要控制后退按钮的应用程序。我使用了以下代码

this.backButtonSubscription = 
this.platform.backButton.subscribeWithPriority(1, async  () => {
    if (this.router.url === '/registration') {
        navigator['app'].exitApp();
    }
});

此订阅事件仅适用于根页面，不适用于其他页面。

我想控制特定页面上的后退按钮以显示警报和其他内容，但现在当单击 android 设备中的硬件后退按钮时，它会转到上一页。

【问题讨论】：

标签： android angular ionic-framework ionic4

【解决方案1】：

下面的代码非常适合我。

在initializeApp()方法中app.component.ts

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleLightContent();
      this.splashScreen.hide();
      this.platform.backButton.subscribeWithPriority(9999, () => {
        if(this.router.url !== '/login') {
          // Back button controls when user is not in Login Page
        } else {
          navigator['app'].exitApp();
        }
      });
    });
  }

【讨论】：

【解决方案2】：

如果你想让 backButton 做 Alert 或 Toast

创建backButton函数：

backButton() {
    this.platform.backButton.subscribeWithPriority(0, () => {
        this.showAlertBack();
    });
}

创建警报功能：

async showAlertBack() {
        const alert = await this.alertCtrl.create({
            message: 'Want to Exit App?',
            buttons: [
                {
                    text: 'Ok',
                    handler: () => {
                        navigator['app'].exitApp();
                    }
                },
                {
                    text: 'Nop',
                    handler: () => {
                        alert.dismiss();
                    }
                }
            ],
            backdropDismiss: false
        });
        await alert.present();
    }

现在在ngOnInit() 或ionViewWillEnter() 中初始化它

this.backButton();

【讨论】：

我刚刚使用上面的代码完成了一个测验应用程序，你确定没有错吗？