如何以編程方式打開d3元素的ngbootstrap彈出窗口？

我想打開一個D3元素的popover onmouseover。如何以編程方式打開d3元素的ngbootstrap彈出窗口？

本質上講，這意味着我的component.html文件幾乎是空的，只包含酥料餅的模板：

<ng-template #popContent let-greeting="greeting">{{greeting}}, <b>{{name}}</b>!</ng-template>

我無法使用通常的

[ngbPopover]="popContent" popoverTitle="Greeting" #p="ngbPopover" triggers="manual"

屬性，因爲目標D3元素尚不存在

我需要的是能夠以某種方式調用popover的打開函數來傳遞彈出窗口的內容和位置。 這樣的事情在我的組件：

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

來源

2017-09-13 Maciej Jankowski

[documentation]（https://ng-bootstrap.github.io/#/components/popover/examples）有一個手動觸發彈出窗口的示例（滾動到** Context和手動觸發器**）。 – Mark

@Mark但它沒有說明如何將它附加到任意的dom元素。 –

它看起來並不像API提供一種方式來對dynamic elements創建酥料餅（參見容器）。由於角度要求您避免直接訪問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 -->

控制器

import {NgbPopover} from '@ng-bootstrap/ng-bootstrap'; 
import {Component, ViewChild, ngAfterViewInit, ElementRef, Renderer2} from '@angular/core'; 

@Component({ 
    selector: 'ngbd-popover-tplwithcontext', 
    templateUrl: 'src/popover-tplwithcontext.html' 
}) 

export class NgbdPopoverTplwithcontext implements ngAfterViewInit { 

    @ViewChild('popover') public popover: NgbPopover; 
    @ViewChild('base') el:ElementRef; 

    ngAfterViewInit(){ 

    // create dynamic element 
    let s = d3.select(this.el.nativeElement) 
     .append('button') 
     .html('Dynamically Added!') 
     // manual open 
     .on('click',() => { this.openPop(); }) 

    // assign popover our new element 
    this.popover._elementRef = new ElementRef(s.node()); 
    } 

    // handle the opening/closing 
    public openPop(): void { 
    console.log(this) 
    this.popover.isOpen() ? this.popover.close() : this.popover.open(); 
    } 
}

這裏是一個running example。

來源

2017-09-16 17:33:35 Mark

謝謝@Mark正是我遵循的道路！ –

如何以編程方式打開d3元素的ngbootstrap彈出窗口？

回答

相關問題