我想为一个D3元素打开一个popover onmouseover。
基本上这意味着我的component.html文件几乎为空,只包含弹出模板:
<ng-template #popContent let-greeting="greeting">{{greeting}}, <b>{{name}}</b>!</ng-template>
我不能使用通常的
[ngbPopover]="popContent" popoverTitle="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? ...
}
答案 0 :(得分:4)
看起来API似乎没有提供在dynamic elements上创建弹出窗口的方法(请参阅容器)。由于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 -->
<强>控制器强>
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();
}
}
答案 1 :(得分:0)
嗨,这很有用,谢谢,但是我必须添加一点,您需要在定义文件popover.d.ts中将属性“ .elementRef”更改为public
export declare class NgbPopover implements OnInit, OnDestroy, OnChanges {
public _elementRef;