Angular 特定目标2的事件委派

如何为angular 2中的特定目标实现事件委派

考虑使用下面的html

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

我在angular的实际场景：

<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>

{{option.displayColumnValue}}
（{{option.email}}）

---

您可以通过使用

@HostListner

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

现在就这样说吧

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

在html中添加指令以及

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

@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);
   }
}

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