Javascript 以编程方式创建角度组件工具提示

我应该在悬停svg元素时显示工具提示

我希望工具提示是一个角度组件，以便于用户界面创建

约束条件是svg元素是以编程方式创建的，因此我不知道如何为动态组件渲染创建模板引用器

我的问题是如何构建一个角度组件作为动态svg元素的工具提示

这里有一个关于stackblitz的消息。我编写了动态组件的代码。现在我应该在悬停圆圈时动态渲染它

@ViewChild('cont', { static:true,read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) { }
@ViewChild('svg', { static: true }) svg: ElementRef

ngAfterViewInit() {
  let circle= document.createElementNS('http://www.w3.org/2000/svg','circle')
  circle.setAttribute('r','40');
  circle.setAttribute('cx','50');
  circle.setAttribute('cy','50');
  //let cont= document.createAttributeNS('http://www.w3.org/2000/svg','#cont')
  //circle.setAttribute('#cont','test')
  this.svg.nativeElement.appendChild(circle)
  this.entry.clear();
  const factory = this.resolver.resolveComponentFactory(TooltipComponent);
  const componentRef = this.entry.createComponent(factory);

}

---

您可以通过创建自定义组件或直接在SVG上使用工具提示来添加它。无论哪种方式，您都希望通过使用RxJS直接观看SVG或circle元素的

mouseover

和

mouseout

事件

你可以在这场分岔的闪电战中看到一个例子

---

ow，rxjs的力量。。但这种方法有其局限性：如果svg包含其他元素，则工具提示不会针对正确的相关圆圈，因此可以直接针对svg。如果这样做，您将获得整个svg的工具提示；不仅仅是你的一个元素。因为您的问题是关于SVG圈子的，所以我认为这样最好。如果您想看到这一点，请将fromEvent方法中的圆圈更改为this.svg.nativeElement。这是我首先做的。此外，它仍然适用于目标圆，但第二个圆与第一个圆重叠，因此有一个小区域不起作用。