Question

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

有人知道我该怎么做吗？

编辑：更多详细信息：

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

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

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

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

Answer 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();
}

Answer 2

适用于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();
        }
    } 
});

Answer 3

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

将平台服务注入Foo组件中。
在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();
}

Answer 4

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

  <mat-form-field appearance="outline">
    <mat-label>Select</mat-label>
    <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length">
      <mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option>
    </mat-select>
  </mat-form-field>

此后，您只需要创建一个函数即可关闭模式弹出窗口。在您的ts文件中

<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>

希望对您有所帮助。

Answer 5

根据马库斯（Markus）的初步回答，您可以决定；而不是在每个后退按钮事件后退订。您可能需要全局监听应用程序中的后退按钮事件，而仅在特定页面上调用退出。

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() } 
        });
      }

Answer 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 中向右移动。

Answer 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

通过后退按钮在Ionic 4中关闭模态

7 个答案: