angular 传递参数给调用函数

Question

我有 hyperlink 和 id 参数

<a [routerlink]="[]" class="someclass" id="12">test</a>

在脚本中我通过这个

添加了对该元素的函数调用

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', this.someFunc.bind(this));

这是一些函数

   someFunc(param){
     console.log('someFunc: '+param);
   }

当我运行应用程序并按下那个 link 我在控制台中得到这个：

someFunc: [object MouseEvent]

如何将 hyperlink 的 'id' 参数发送到该函数？

尝试来自 Aakash Garg

的解决方案

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', (e) => this.someFunc(e.target.id));

用于测试直接打印：

(e) => console.log('test: '+e.target.class) > prints out test: undefined
 (e) => console.log('test: '+e.target.id) > prints out test:

Answer 1

您可以使用 angular click-handler。以您的方式添加事件侦听器存在的问题是它可能运行在 angular 区域之外并导致问题。

<a [routerlink]="[]" class="someclass" (click)="someFunc('12')" id="12">test</a>

Answer 2

this.elementRef.nativeElement.querySelector('.someclass').addEventListener('click', (e) => this.someFunc(e.id));

angular pass parameters to calling function