web-dev-qa-db-ja.com

Dismiss Ionic 4そのコンポーネントからのポップオーバー

標準Ionic 4ページ（ホーム）があり、新しいページ（RequestTurn）にリダイレクトするボタンを備えたコンポーネント（BusinessDetails）を使用するポップオーバーを作成します。しかし、それをクリックするとボタンをクリックすると、ポップオーバーは閉じられず、RequestTurnページの上にレンダリングされます。コンポーネント（BusinessDetails）から手動で閉じる必要があると思いますが、そこからポップオーバーのインスタンスにアクセスする方法がわかりません。ホームページで作成されましたが、これを行う方法はありますか？

home.page.ts

presentModal(business:Business, event: Event) {
this.popoverController.create(({
    component: BusinessDetailsComponent,
    cssClass: "business-popover",
    showBackdrop: true,
    componentProps: {
        business: business
    }
}) as any).then(popover => popover.present()); }

business-detail.component.ts

goToRequestTurn(id: string) {
   //Need to dismiss popver here (?)
   this.router.navigateByUrl(`/request-turn/${id}`); }

ご協力いただきありがとうございます。

popoverionic4
9
hugonne

追加 private popoverController: PopoverControllerをコンポーネントコンストラクタに

次に、このような関数を記述し、モーダルを閉じるときに呼び出します

 async DismissClick() {
await this.popoverController.dismiss();
  }
22
Ehsan Kiani

私はこの問題を次のように解決しました：親コンポーネントで子コンポーネントにプロップとしてコールバックを渡しました：

_const popover = await this.popoverController.create({
  component: PopoverComponent,
  event: ev,
  componentProps: {
    onClick: () => {
      popover.dismiss();
    },
  },
});
await popover.present();
_

そして、PopoverComponentに、ユーザーがクリックしたときに呼び出される@Input() onClick;を追加しました。

_...
@Input()
public onClick = () => {}
...
afterClick() {
  this.onClick();
}
_
1
Денис