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

Question

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

有人知道我该怎么做吗？

编辑：更多详细信息：

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

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

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

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

代码应该是这样的：

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

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

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