Директива 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 не очень помогла.


angular angular-directive
person Dilip Raj Baral    schedule 29.08.2017    source источник
comment
можно получить текущий элемент, используя ElementRef   -  person Rajez    schedule 29.08.2017
comment
stackoverflow.com/questions/41700724/   -  person user3145373 ツ    schedule 29.08.2017
comment
Документация @Rajez Angular предостерегает от использования ElementRef. Говорит использовать это только в крайнем случае. Никаких других курортов?   -  person Dilip Raj Baral    schedule 29.08.2017
comment
@ user3145373 ツ Это не помогает.   -  person Dilip Raj Baral    schedule 29.08.2017
comment
@DilipRajBaral: вы можете использовать (click) для этого? при нажатии вы также можете обнаружить элемент. Если вы хотите передать какое-либо событие родительскому элементу, вы также можете это сделать.   -  person user3145373 ツ    schedule 29.08.2017
comment
вы можете увидеть stackoverflow.com/questions/40986464/, если ваш li динамический.   -  person user3145373 ツ    schedule 29.08.2017
comment
@ user3145373 ツ Вы имеете в виду привязку метода к событию click?   -  person Dilip Raj Baral    schedule 29.08.2017
comment
@DilipRajBaral: да.   -  person user3145373 ツ    schedule 29.08.2017
comment
@ user3145373 ツ Нет. Я хочу добиться этого внутри самой директивы.   -  person Dilip Raj Baral    schedule 29.08.2017

Ответы (1)


arrow_upward
2
arrow_downward 

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

        }
    }

Он работает нормально, вы можете попробовать это.

person Kunvar Singh    schedule 29.08.2017