Angular 指令2上的停止按钮单击事件

我用angular 2和Priming构建了我的应用程序。我尝试在按钮单击时使用指令来检查用户权限。问题是； 如果没有权限，请不要继续按钮单击操作。但StopRopagation不会停止单击事件。如果checkAuth（）返回false，如何停止进程

大宗报价

@指令({
选择器：“[checkAuthOnClick]”
})
导出类checkAuthorizationOnClick指令{
用户：可观察；
@Input（）allowedClaim:任意；
观察者：突变观察者；
构造函数（私有元素：ElementRef，私有存储：store）{
this.element=element.nativeElement；
}
@输出（）
停止：EventEmitter=新的EventEmitter；
@HostListener（'单击'，['$event，$event.target']））
onClick（事件，targetElement）{
如果（！this.checkAuth（））{
event.stopPropagation（）；
event.preventDefault（）；
event.cancelBuble=true；
事件。stopImmediatePropagation（）；
this.stop.emit（事件）；
}
}   
私有checkAuth（）：布尔值{
this.user=this.store.select（fromRoot.currentUser）；
if（this.user！=未定义&&this.allowedClaim！=未定义）{
var hasClaim=false；
var描述；
this.user.subscribe（x=>{
如果（Array.isArray（this.allowedClaim））{//Gelen/Giden Faturalarıgörüntüleme yetkileri tümüve kendisee ait o.şbirdençok olduğu için app routes'ta Array olak tan mlandı。
for（设i=0；i

像这样的html指令用法

<button type="button" pButton icon="fa fa-file-code-o" (click)="createForm()" checkAuthOnClick [allowedClaim]="systemDefinedClaims?.CreateInvoiceDesign"></button>

通过

绑定事件（单击）

和

主机绑定

仅意味着将两个独立事件绑定到目标元素，它们将同时被调用，不会相互影响，这意味着停止其中任何一个都不会停止另一个

您需要在指令的click event binding via

HostBinding

中手动调用click event（当前通过

（单击）

）绑定

// transfer click event into directive
@Input('clickEvent') clickEvent;


@HostListener('click', ['$event, $event.target'])
onClick(event, targetElement) {  
    if (!this.checkAuth()) {
        event.stopPropagation();
        event.preventDefault();
        event.cancelBubble = true;
        event.stopImmediatePropagation();

        this.stop.emit(event);
    } else {
        this.clickEvent();
    }
}    

---

请参阅

应该会有帮助。是的，它很有效。非常感谢。但现在，我有一个这样的问题，按钮点击事件使用这个关键字；createForm（）{this.router.navigate（['/ayarlar/fatura gorsel/olustur']）；}但仍将此键值作为指令页。

// transfer click event into directive
@Input('clickEvent') clickEvent;


@HostListener('click', ['$event, $event.target'])
onClick(event, targetElement) {  
    if (!this.checkAuth()) {
        event.stopPropagation();
        event.preventDefault();
        event.cancelBubble = true;
        event.stopImmediatePropagation();

        this.stop.emit(event);
    } else {
        this.clickEvent();
    }
}