Ereignis Delegation für bestimmtes Ziel Angular 2

Question

Wie Ereignis Delegation für bestimmtes Ziel in Winkeln 2

Betrachten Sie mit dem unten html

<ul> 
    <li><span>hello</span><button>button</button></li> 
</ul> 

und ich mag implementieren Ereignisse Delegation zur Umsetzung des li Ziel, auch wenn Der Benutzer klickte auf den Bereich oder die Schaltfläche in der li, das li-Ereignis wird ausgeführt.

zum Beispiel können wir dies in jquery erreichen mit:

$('ul').on('click', 'li', function() { 
    console.log($(this)) // always log the li whenever you clicked inside it 
}) 

mein eigentliches Szenario in Winkel:

<div class="list-group" (click)="selectOption($event)"> 

<button type="button" class="list-group-item" *ngFor="let option of options; let i = index" 
[attr.data-value]="option.key" [attr.data-label]="option.displayColumnValue"> 
    <span [title]="option.displayColumnValue "> 
    {{ option.displayColumnValue }} 
    <small *ngIf="option.email">({{ option.email }})</small> 
    </span> 

    <a *ngIf="option.group" class="drilldown" [attr.data-key]="option.key"><i class="fa fa-chevron-right" aria-hidden="true"></i></a> 
</button> 

Answer 1

Sie diese achive kann durch eine Richtlinie mit @HostListner Schaffung

@Directive({selector: '[dele]') 
export class delegator{ 
    @HostListener('click') clicked($event) { 
     console.log($event.target); // this will be a child button 
    } 
} 

nennen es nun wie folgt

<ul dele> 
    <li><span>hello</span><button>button</button></li> 
</ul> 

EDIT

wenn Sie hostlistner auf ein bestimmtes Element hinzufügen möchten dann

@Directive({ 
    selector: "[dele]" 
}) 
export class deleDirective { 
    @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>(); 

    @HostListener("focusout", ["$event"]) 
    public onListenerTriggered(event: any): void { 
     this.onFocusOut.emit(true); 
    } 
} 

als auch die Richtlinie hinzufügen Im html ein Ereignis verwenden wie die

<ul> 
     <li dele (onFocusOut)='clickFunction($event)'><span>hello</span><button>button</button></li> 
</ul>