Angular 如何将事件绑定到指令？

我有我的指令，我想把$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>

下降面积

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

@HostListener('onDropSuccess') onDropSuccess() {

  }

如果你想对元素施展魔法，你总是可以得到这样的元素引用

 _elementRef.nativeElement

在掌握了元素之后，你可以实现你的魔法。 希望这会有帮助