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指令 - 你怎麼知道哪個孩子調用了這個指令？

回答

相關問題