Angular 2指令 - 你怎么知道哪个孩子调用了这个指令？

说我有一个标记类似如下：Angular 2指令 - 你怎么知道哪个孩子调用了这个指令？

<ul someSelector> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    ... 
</ul>

而且我有一个指令是这样的：

@Directive({ 
    selector: '[someSelector]' 
}) 
export class SomeDirective { 

    @HostListener('click') someFunction() { 
     // Know which child LI that was clicked on at this point; 
     // Say I want to add some class to that LI 
    } 

}

单击任何列表中的项目将调用（指令和）someFunction()方法。在该方法的范围中，我想知道哪个列表项被点击。这可能吗？

我可以创建另一个指令并将其放在每个<li>中，但由于父母已经有一个指令，我觉得这样做太矫枉过正了。

@HostListener documentation不是很有帮助。

来源

2017-08-29 Dilip Raj Baral

可以使用'ElementRef'获取当前元素 – Rajez

https://stackoverflow.com/questions/41700724/angular2-hostlistener-how-can-i-target-an-element-can-i-target-based-on- class＃41700814 –

@Rajez Angular文档警告不要使用ElementRef。说它只能用作最后的手段。没有其他度假村？ –

<ul appSomedirective> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    ... 
</ul> 


import { EventEmitter, HostListener, Directive } from '@angular/core'; 

    @Directive({ 
     selector: '[appSomedirective]' 
    }) 
    export class SomedirectiveDirective { 
    numberOfClicks:Number; 
     constructor() { } 
    @HostListener('click', ['$event.target']) someFunction(event) { 
     debugger; 
     console.log("button", event.innerText, "number of clicks:"); 

     } 
    }

它工作正常，您可以试试这个。

来源

2017-08-29 04:54:36

Angular 2指令 - 你怎么知道哪个孩子调用了这个指令？

回答

相关问题