从其组件中关闭 Ionic 4 弹出框答案

【问题标题】：Dismiss Ionic 4 popover from its component从其组件中关闭 Ionic 4 弹出框
【发布时间】：2019-07-27 07:13:08
【问题描述】：

我有一个标准的 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()); }

business-detail.component.ts

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

感谢您的帮助。

【问题讨论】：

我最终将 popoverController 实例从 Home 传递到 BusinessDetails，并使用该实例将其关闭。但是，我不确定这是最好的方法，或者是否有更直接的方法。

标签： popover ionic4

【解决方案1】：

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

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

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

【讨论】：

你的意思是“对组件构造函数”吗？因为那是我需要解除它的地方，但在我看来，这样做会注入一个新的控制器实例，所以不会解除原来的。无论如何，我会试一试。谢谢。
是的组件构造函数，对不起我的错误。如果你成功了请告诉我。祝你好运
它确实有效，感谢您的帮助。所以，这意味着你注入的 PopoverController 实际上是一个单子，对吗？不然怎么会关闭注入到首页的构造函数的实例呢？
谢谢，它帮助了我。很奇怪，但第一次没有用。一段时间后尝试此方法时，它开始工作 O_o

【解决方案2】：

我解决了这个问题如下：在父组件中，我已将回调作为道具传递给子组件：

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

【讨论】：

错了。您将输入作为“onClick”并在“afterClick”上写入“this.click()”
赞，确实很聪明！