特定目标角度2的事件委托

Question

如何在angular 2中实现特定目标的事件委托

考虑使用下面的html

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

我还想实现事件委托，即使用户单击了li中的span或按钮，li事件也会运行。

例如，我们可以在jquery中使用以下命令来实现此目的：

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

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

​

Answer 1

您可以通过使用@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>

编辑

如果要将hostlistner添加到特定元素，则使用事件

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

在html中添加指令以及

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