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

Question

假设我有如下标记：

<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> 中，但是由于 parent 已经有一个指令，我觉得这样做有点过分了。

@HostListener documentation 帮助不大。

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

        }
    }

很好用，你可以试试这个。

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

Angular 2 Directive - How do you know which child invoked the directive?

angular-directive

angular