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

【问题标题】：Angular 2 Directive - How do you know which child invoked the directive?Angular 2 Directive - 你怎么知道哪个孩子调用了指令？
【发布时间】：2017-08-29 04:19:03
【问题描述】：

假设我有一个类似以下的标记：

<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 不是很有帮助。

【问题讨论】：

可以使用ElementRef获取当前元素
stackoverflow.com/questions/41700724/…
@Rajez Angular 文档警告不要使用 ElementRef。说只作为最后的手段使用它。没有其他度假村？
@user3145373ツ没用。
@DilipRajBaral：你能用(click)这个吗？单击时您也可以检测元素。如果您想向父母发出任何事件，那么您也可以这样做。

标签： angular angular-directive

【解决方案1】：

<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:");

        }
    }

效果很好，你可以试试这个。

【讨论】：