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

business-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

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

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

Answer 3

将private popoverController: popoverController添加到弹出式构造函数

然后编写这样的函数，并在您想要关闭弹出菜单时调用它。此功能还可以保留导航逻辑。先关闭弹出窗口然后再导航似乎可以提供更好的用户体验

 async DismissClick() {
    await this.popoverController.dismiss();
    this.router.navigate([`/request-turn/${id}`]);

从其组件中消除Ionic 4弹出窗口

3 个答案: