Ion-popover 功能和行为，居中而不是内联

Question

有人可以检查以下 stackblitz 并向我解释这两个按钮之间的区别以及为什么每个按钮的 ion-popover 行为不同？

堆栈闪电战

我感兴趣的是为什么弹出窗口显示在“单击我”的元素下方以及为什么它在单击感叹号按钮时显示为弹出窗口（屏幕中心）？

我期望按钮具有相同的行为，因为它们使用的是presentPopover相同的函数，但是由于某种原因它使用emitClick，弹出窗口呈现不同的效果

Answer 1

差异很微妙，但并不明显：它与事件的目标有关。如果在

presentPopover

方法中记录

e.target

并单击“Click me”按钮，您将看到目标与您单击的

ion-button

相同，因此弹出窗口将显示在该位置。但是，当您单击具有相同控制台日志行的图标（感叹号）时，您会看到错误 - 因为您发出的内容没有任何内容。因此，目标是未定义的，弹出窗口将使用窗口作为弹出窗口的参考点（没有目标，对吧？）。再说一次，如果您编写

this.emitClick.emit(event);

，即如果您将事件发送到发射器，您的

presentPopover

将接收触发弹出窗口的元素（即图标按钮），并且弹出窗口将在图标旁边弹出。简而言之，如果有定义的目标，弹出框将在那里弹出，如果没有 - 它将居中。