我在 angular2 中创建了一个简单的 offClick 指令，它的工作原理如下。
import { Directive, Host, Input, Output, EventEmitter, ElementRef } from '@angular/core';
@Directive({
selector: '[offClick]',
host: {
'(document:click)': 'onClick($event)',
}
})
export class OffClickDirective {
@Input('offClick') a;
@Output('off')
offClicked = new EventEmitter();
constructor(
private elementRef: ElementRef) {
}
onClick($event) {
$event.stopPropagation();
if (!this.elementRef.nativeElement.contains($event.target))
this.offClicked.emit({});
}
}
但是要将其添加到 HTML 元素中，我必须执行类似的操作。
<div [offClick] (off)="onOffClick($event)"></div>
我是否可以更改此指令，以便我可以在 HTML 元素上使用它
<div (offClick)="onOffClick($event)"></div>
或者
我基本上不想为指令声明一个标签，然后再声明另一个标签来捕获事件......
提前致谢
最佳答案
这应该可以达到你想要的效果
@Directive({
selector: '[offClick]',
host: {
'(document:click)': 'onClick($event)',
}
})
export class OffClickDirective {
@Output('offClick')
offClicked = new EventEmitter();
constructor(
private elementRef: ElementRef) {
}
onClick($event) {
$event.stopPropagation();
if (!this.elementRef.nativeElement.contains($event.target))
this.offClicked.emit({});
}
}
<div (offClick)="onOffClick($event)"></div>
关于javascript - 如何将指令绑定(bind)到 angular2 中的函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38878096/