Angular2 指令修改点击处理 [英] Angular2 Directive to modify click handling
问题描述
我正在尝试编写一个 Angular2 属性指令来修改某些元素的行为.更具体地说,我想将一个属性应用于具有点击处理程序的某些元素,并防止在某些条件下执行绑定函数.
I am trying to write a Angular2 attribute directive to modify the behaviour of certain elements. More specifically I want to apply an attribute to certain elements that have click handlers and prevent the bound function to be executed under certain conditions.
所以现在我有一个元素,例如:
So now I have an element e.g.:
<button (click)="onClick(param1, param2)"></button>
onClick 是在承载按钮元素的组件上声明的函数.
onClick is a function declared on the component that hosts the button element doing some work.
我想做的是写一些类似的东西:
What I would like to do is write something like:
<button (click)="onClick(param1, param2)" online-only></button>
并有一个指令,如:
@Directive({
selector: '[online-only]',
})
export class OnlineOnlyDirective {
@HostListener('click', ['$event'])
onClick(e) {
if(someCondition){
e.preventDefault();
e.stopPropagation();
}
}
}
但是首先执行点击处理程序,因此没有给我的指令停止执行的机会.
But click handler is executed first, thus not giving my directive the opportunity to stop its execution.
我想到的第二种方法是用我自己的处理程序替换 (click),例如 ( [onlineClick]="onClick" ) 并在指令认为合适时执行传递的函数,但这样我无法将参数传递给 onClick 函数和看起来有点奇怪.
A second approach I thought about was replacing (click) with my own handler e.g.( [onlineClick]="onClick" ) and execute the passed function when the directive thinks fit, but this way I cannot pass params to onClick function and is a bit weirder to look at.
你对做这样的事情有什么想法吗?
Do you have any thoughts on doing something like that?
推荐答案
我不知道有什么方法可以强制 Angular 先执行某个事件处理程序.解决方法可能是使用自定义事件,例如:
I don't know of a way to force Angular to execute a certain event handler first. A workaround might be to use a custom event like:
<button (myClick)="onClick(param1, param2)" online-only></button>
@Directive({
selector: '[myClick]',
})
export class OnlineOnlyDirective {
@Output() myClick: EventEmitter = new EventEmitter();
@HostListener('click', ['$event'])
onClick(e) {
if(someCondition){
e.preventDefault();
e.stopPropagation();
} else {
this.myClick.next(e);
}
}
}
这篇关于Angular2 指令修改点击处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!