angular - 如何将事件绑定(bind)到指令？

Question

我有我的指令，我想将 $event 传递给该指令。

我正在 div 上放置一个元素，并通过事件传递我正在放置的 obj。

我的默认(onDropSuccess)="onDropSuccess($event)"，拾取事件，我可以做所有事情，但如何通过指令传递它，因为我想( onDropSuccess) 将事件传递给我的 colordrop 指令并在那里执行一些神奇的功能。

指令

import { Directive, ElementRef, Input, Output, EventEmitter, OnChanges, HostListener, ViewChild, ViewChildren} from "@angular/core";

@Directive({
    selector: '[colorDropModel]',
   host: {
    '(onDropSuccess)' : 'addColor()'
    }
})

export class colorDropDirective  {
@Input() colorDropModel: string; 
  constructor(  private _elementRef: ElementRef){}

  addColor(event) {
    console.log('colorDropModel', event)

  }
}

HTML

<div 
    (onDropSuccess)="onDropSuccess($event)" 
    [colorDropModel]="$event"
>
    Dropable area 
</div>

Answer 1

如果您尝试访问指令的事件，则不必在 div 上添加事件。 在您的指令中，您可以执行以下操作:

@HostListener('onDropSuccess') onDropSuccess() {

  }

如果你想对元素做一些魔法，你总是可以像这样获得元素引用

 _elementRef.nativeElement

掌握该元素后，您就可以施展魔法了。 希望这会有所帮助!