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

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

您可以使用Platform服务包含的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();
}

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

我希望这会对你有所帮助。