Question

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

我正在div上删除一个元素，通过事件我传递了我正在丢弃的obj。

我的默认（onDropSuccess）=＆＃34; onDropSuccess（$ event）＆＃34; ，选择事件我可以做任何事情，但我如何通过指令传递它我想on（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

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

如何将事件绑定到指令？

1 个答案: