从其组件中关闭 Ionic 4 弹出窗口

Question

我有一个标准的 Ionic 4 页面（主页），它创建了一个弹出窗口，该弹出窗口使用一个组件（BusinessDetails）和一个重定向到新页面（RequestTurn）的按钮。但是，当我单击该按钮时，弹出窗口不会消失，而是呈现在我的 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()); }

业务-detail.component.ts

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

感谢您的帮助。

Answer 1

在组件构造函数中添加private popoverController: PopoverController

然后写一个这样的函数，当你想关闭模态时调用它

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

Answer 2

我是这样解决这个问题的：在父组件中，我已将回调作为 prop 传递给子组件：

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

从其组件中关闭 Ionic 4 弹出窗口

Dismiss Ionic 4 popover from its component

popover

ionic4