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

@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指令 - 您如何知道哪个孩子调用了该指令？

1 个答案: