web-dev-qa-db-ja.com

Ionic 4で戻るボタンでモーダルを閉じる

Ionic 4にModalがあります。 閉じるそれをユーザーが携帯電話（またはブラウザの戻るボタン）で戻るボタンを押すと、それが表示されます。

誰か私がこれを行う方法を知っていますか？

編集：詳細：

モーダルを開くボタンがあります。

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

コンポーネントFooには、モーダルを閉じるボタンthis.modalController.dismiss();よりも多くのコンテンツがありません。ここまでは順調ですね。

ただし、私の携帯電話では、モーダルが開いているときにアプリが閉じ、ユーザーが携帯電話の戻るボタンをタップします。ただし、この場合はモーダルのみを閉じる必要があります。

modal-dialogionic4
5
Markus

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

はい、ほぼ間もなくです。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();
  }

お役に立てば幸いです。

1
Surya prakash chaturvedi

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();
}
1
Enol Casielles Martinez