如何在Angular 9中以编程方式添加鼠标输入/离开事件侦听器？

Question

所以我有一个带有一堆路径的svg。悬停时，我需要为每个触发器触发不同的功能。如何在Angular 9中做到这一点？

<svg>
  <path id="1" />
  <path id="2" />
  <path id="3" />
</svg>

我想做这样的事情：

const paths = this.document.querySelector('svg').children;
paths.forEach(path=>{
  path.addEventListner('moseenter', exeFunction(path.id));  
});

最佳的Angular方法是什么？

Answer 1

您可以做这样的事情

在组件类中

    ids = [1,2,3]

    public moseenter(id: number) {
        //handle event
      }

在html类中

<svg>
  <path id="{{id}}" *ngFor="let id of ids" (click)="moseenter(id)"/>
</svg>