通过后退按钮关闭 Ionic 4 中的模态答案

【问题标题】：Close Modal in Ionic 4 by Back Button通过后退按钮关闭 Ionic 4 中的模态
【发布时间】：2021-02-06 10:09:43
【问题描述】：

我在 Ionic 4 中有一个 Modal。当用户按下移动设备上的后退按钮（或浏览器中的后退按钮）时，我想关闭它。

有人知道我该怎么做吗？

编辑：更多细节：

我有一个按钮可以打开我的模式：

async onClick() {
  const modal = await this.modalController.create({
    component: Foo,
  });
  return await modal.present();
}

组件Foo 没有比关闭模式的按钮更多的内容：this.modalController.dismiss();。到目前为止一切顺利。

但是，在我的手机上，当模式打开并且用户点击手机的后退按钮时，应用程序现在关闭。但在这种情况下，只有模式应该关闭。

【问题讨论】：

您是否尝试过在 Ionic 3 中有效的方法？
我是 Ionic 的新手，完全不知道该怎么做...
好的，我将发布 Ionic 3 的答案。让我知道它是否适合您。
嘿，我想发布 Ionic 3 的解决方案，但我缺少更多上下文 - 所以目前你确实实现了模态正确吗？你能分享你到目前为止的任何代码吗，否则我可能会为错误的问题提供解决方案

标签： modal-dialog ionic4

【解决方案1】：

Enol 的回答帮助我找到了解决方案，谢谢。

platform.registerBackButtonAction 在 v4 中不再存在。我尝试了platform.backButton.subscribe，但没有成功。什么是这样的：

private backbuttonSubscription: Subscription;

constructor(private modalCtrl: ModalController) {

ngOnInit() {
    const event = fromEvent(document, 'backbutton');
    this.backbuttonSubscription = event.subscribe(async () => {
        const modal = await this.modalCtrl.getTop();
        if (modal) {
            modal.dismiss();
        }
    });
}

ngOnDestroy() {
    this.backbuttonSubscription.unsubscribe();
}

【讨论】：

【解决方案2】：

您可以使用平台服务包含的registerBackButtonAction 方法。此方法允许覆盖硬件后退按钮的默认本机操作。该方法接受一个回调函数作为参数，您可以在其中实现您的逻辑。总之，您应该执行以下操作：

在 Foo 组件中注入 Platform 服务。
在 ngOnInit（或其他 init 方法）中调用 registerBackButtonAction 并将函数回调作为参数传递，以执行关闭模式的逻辑 (this.modalController.dismiss();)
在模态组件关闭时清除操作（例如在 ngOnDestroy 方法中）。为此，registerBackButtonAction 返回一个函数，当调用该函数时，该操作将被删除。

代码应该是这样的：

constructor(private platform: Platform) {
    ...
}

ngOnInit() {
    this.unregisterBackAction = this.platform.registerBackButtonAction(() => {
        this.modalController.dismiss();
    })
}

ngOnDestroy() {
    if(this.unregisterBackAction) this.unregisterBackAction();
}

【讨论】：

this.platform.registerBackButtonAction 在 ionic 4 中不再可用 .. 请修改您的代码

【解决方案3】：

是的，快到了.... 您只需要更改 HTML 部分。我就是这样做的。

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button color="dark" (click)="closeModal()">
                <ion-icon name="arrow-back"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>Create Pin</ion-title> 
    </ion-toolbar>
</ion-header>

在此之后，您只需要创建一个函数来关闭您的模态弹出窗口。在你的 ts 文件中

closeModal() {
    this.modalCtrl.dismiss();
}

希望对你有帮助。

【讨论】：

这并不能解决浏览器上的后退按钮，但我想要这段代码，而你已经写得真好
这与提出的问题无关。

【解决方案4】：

对于 ionic 5 用户

this.platform.backButton.subscribeWithPriority(999, async() => {
    if (this.modalCtrl.getTop()) {
        const modal = await this.modalCtrl.getTop();
        console.log(modal)
        if (modal) { 
            this.modalCtrl.dismiss();
            return;
        } else {
            if (this.router.url=="/myrootpage" ) {
            navigator['app'].exitApp();
        } else {
            this.navCtrl.pop();
        }
    }
    } else {
        if (this.router.url=="/myrootpage") {
            navigator['app'].exitApp();
        } else {
            this.navCtrl.pop();
        }
    } 
});

【讨论】：

【解决方案5】：

根据 Markus 的初步回答，您可以决定；而不是在每个后退按钮事件后退订。您可能希望在应用程序中全局监听后退按钮事件，并且只在特定页面上调用 exit。

import { fromEvent } from "rxjs";           // import fromEvent from rxjs
import { Router } from "@angular/router";   // import angular router as well
import { Location } from "@angular/common"; // import location from angular common
    
constructor(private router: Router, private location: Location) {

// 在 app.component.ts 处应用初始化时调用该函数。它会注意 // 在应用程序中全局返回按钮事件。

  this.backButtonEvent();
}

// Function to present the exit alert
   async exitAlert() {
    const alert = await this.alertController.create({
      // header: 'Confirm!',
      message: "Are you sure you want to exit the app?",
      buttons: [
        {
          text: "Cancel",
          role: "cancel",
          cssClass: "secondary",
          handler: blah => {}
        },
        {
          text: "Close App",
          handler: () => {
            navigator["app"].exitApp();
          }
        }
      ]
    });

    await alert.present();
  }
    
      // function to subscribe to the backbutton event
      backButtonEvent(): void {
        const event = fromEvent(document, "backbutton");
        event.subscribe(async () => {
        // When the current route matches a specific page/route in the app where u 
        // want to exit on back button press.
    
        // else assume the user wants to navigate to a previous page
         if(this.router.url === "<example page-url to exit from>") { this.exitAlert() 
        }
         else { this.location.back() } 
        });
      }

【讨论】：

【解决方案6】：

更新，适用于 Ionic 5 (Angular)

在your-modal.page.ts

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

在模态文件的 .ts 文件的顶部。然后在您的构造函数中，您可以只表示与控制器的 -public- 关系，这样您的视图就可以访问它。

也在your-modal.page.ts

constructor(
    public modalCtrl: ModalController
) {}

现在你可以内联关闭命令了：

在your-modal.page.html

<ion-header color="dark">
  <ion-toolbar color="dark">
    <ion-title>Modal Title</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Slot "primary" 使按钮在 iOS 中向右移动。

【讨论】：

【解决方案7】：

你也可以使用ionic的内置函数

   <ion-back-button>
   </ion-back-button>

您还可以将<ion-back-button> 定位为开始或结束

<ion-buttons slot="start">
   <ion-back-button>
   </ion-back-button>
</ion-buttons>

有关<ion-back-button>的更多信息这里是a link

【讨论】：