Javascript 如何以编程方式打开d3元素的ngbootstrap popover？

我想在mouseover上为D3元素打开一个popover

本质上这意味着my component.html文件几乎为空，仅包含popover模板：

{{greeting}，{{name}

我不能用平常的

[ngbPopover]=“popContent”popopovertitle=“Greeting”#p=“ngbPopover”triggers=“manual”

属性，因为目标D3元素还不存在

我需要的是能够以某种方式调用popover的open函数，传递popover的内容和位置。
在我的组件中类似这样的内容：

public showPopover(node, text){ // node is the DOM element for which to show popover
 ... what should go here? ...
}

看起来API没有提供在上创建popover的方法（请参见容器）。由于angular希望您避免直接访问DOM，因此必须通过模板创建弹出窗口。因此，我将在一个“空白”元素上创建它，然后将它移动到您的动态元素。也就是说，一旦你移动它，你就必须手动触发它，因为所有事件都在“空白”元素上。大概是这样的：

模板

<!-- empty span to create the popover on -->
<!-- note the "manual" trigger -->
<span ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top"
        #popover="ngbPopover" triggers="manual">
</span>

<div #base></div> <!-- where my dynamic element will go -->

下面是一个例子。
它看起来不像API提供了在上创建popover的方法（请参见容器）。由于angular希望您避免直接访问DOM，因此必须通过模板创建弹出窗口。因此，我将在一个“空白”元素上创建它，然后将它移动到您的动态元素。也就是说，一旦你移动它，你就必须手动触发它，因为所有事件都在“空白”元素上。大概是这样的：

模板

<!-- empty span to create the popover on -->
<!-- note the "manual" trigger -->
<span ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top"
        #popover="ngbPopover" triggers="manual">
</span>

<div #base></div> <!-- where my dynamic element will go -->

这是一个。
您好，它很有用，谢谢您，但是我必须添加一个东西，您需要将定义文件popover.d.ts中的属性“.elementRef”更改为public

export declare class NgbPopover implements OnInit, OnDestroy, OnChanges {
public _elementRef;

您好，这很有用，谢谢您，但是我必须添加一个东西，您需要将定义文件popover.d.ts中的属性“.elementRef”更改为public

export declare class NgbPopover implements OnInit, OnDestroy, OnChanges {
public _elementRef;

有一个手动触发popover的示例（滚动到上下文和手动触发器）。@标记但没有说明如何将其附加到任意dom元素。有一个手动触发popover的示例（滚动到上下文和手动触发器）@Mark，但它没有说明如何将其附加到任意dom元素。替代方法是在组件中创建NgbPopover的实例。它有一个很长的依赖项列表，您必须将这些依赖项注入到组件中，这是传递给NgbPopover的唯一原因。在我看来，这是一个更易于维护的解决方案！在ngbootstrap版本9.0.2中，它说[属性'\u elementRef'是私有的，并且只能在类'NgbOpover'中访问]另一种方法是在组件中创建一个NgbPopover实例。它有一个很长的依赖项列表，您必须将这些依赖项注入到组件中，这是传递给NgbPopover的唯一原因。在我看来，这是一个更易于维护的解决方案！在ngbootstrap版本9.0.2中，它说[属性'\u elementRef'是私有的，只能在类'NgbPopover'中访问]