Question

如何在角度2

中实现特定目标的事件委派

考虑使用以下html

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

我希望实现事件委派以定位li，即使用户点击了li中的范围或按钮，li事件也会运行。

例如我们可以使用以下命令在jquery中实现：

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

我的角色实际场景：

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

针对特定目标Angular 2的事件委派

1 个答案: