离子弹在离子模态上的位置

Question

我正在尝试在已打开的模式中显示信息弹出窗口。 但是，弹出窗口不会显示在正确的位置。即使将事件传递给popoverController，位置也不正确。

是否可以在信息按钮下方显示弹出窗口？

模式中的代码，我称之为弹出窗口：

const popoverElement = Object.assign(document.createElement('ion-popover'), {
      component: 'info-popover',
      event: event,      
    });

document.body.appendChild(popoverElement);
return await popoverElement.present();

上面的Popover屏幕截图：

编辑

这是DOM的外观。如您所见，模态附加到body> app-root> ion-app。弹出框仅附加到body

编辑2

在模具中关闭阴影DOM可以解决此问题，但是我不愿意。

@Component({
  tag: "component",
  styleUrl: "component.css",
  shadow: false
})

Answer 1

问题似乎是click事件的target属性是带阴影的父级，而不是被单击项本身sets the wrong popover position。

由于您手动传递了事件，因此一种解决方法是手动设置target。但是因为这是一个只读字段，所以您需要使用Object.defineProperty（代替theClickedElement）来完成此操作：

Object.defineProperty(event, 'target', {value: theClickedElement})

const popoverElement = Object.assign(document.createElement('ion-popover'), {
  component: 'info-popover',
  event: event,      
});