Wie programmierst du ngbootstrap popover für ein d3-Element?

Question

Ich möchte ein Popover auf Mouseover für ein D3-Element öffnen.

Im Wesentlichen bedeutet dies, meine component.html Datei fast leer ist, enthält nur die popover Vorlage:

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

ich nicht die üblichen

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

Attribute verwenden kann, da Ziel D3 Element existiert noch nicht

Was ich brauche, ist irgendwie in der Lage zu sein, die offene Funktion des Popovers zu verwenden, indem ich den Popover-Inhalt und die Position übergebe. so etwas in meiner Komponente:

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

Answer 1

Es ist nicht wie die API sieht bietet eine Möglichkeit, die popover auf dynamic elements (siehe Container) zu erstellen. Da angular möchte, dass Sie direkten Zugriff auf das DOM vermeiden, müssen Sie das Popup über eine Vorlage erstellen. Also, ich würde es auf einem "leeren" Element erstellen und es dann zu Ihrem dynamischen Element verschieben. Das heißt, sobald Sie es bewegen, müssen Sie es manuell auslösen, da Ereignisse alle auf dem "leeren" Element sein werden. Etwas wie folgt aus:

Vorlage

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

-Controller

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

Hier ist ein running example.