指令Angular 2上的停止按钮单击事件 [英] Stop Button Click Event On Directive Angular 2

问题描述

我使用angular 2和PrimeNG构建了我的应用程序.我尝试使用按钮单击指令来检查用户权限.问题是； 如果没有权限，请不要继续执行按钮单击操作.但是stopPropagation不会停止click事件.如果checkAuth()返回false，如何停止进程?

I built my app with angular 2 and PrimeNG. I try to use directives on button click for checking user authority. Problem is; if there is no authority, do not continue button click action. But stopPropagation doesn't stop click event. How to stop process if checkAuth() returns false?

Blockquote

Blockquote

@Directive({
    selector: '[checkAuthOnClick]'
})

export class CheckAuthorizationOnClickDirective {

    user: Observable<User>;
    @Input() allowedClaim: any;
    observer: MutationObserver;

    constructor(private element: ElementRef, private store: Store<fromRoot.State>) {
        this.element = element.nativeElement;
    }

    @Output()
    stop: EventEmitter<Event> = new EventEmitter;

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

            this.stop.emit(event);
        }
    }   

    private checkAuth(): boolean {
        this.user = this.store.select(fromRoot.currentUser);
        if (this.user != undefined && this.allowedClaim != undefined) {
            var hasClaim = false;
            var description;
            this.user.subscribe(x => {
                if (Array.isArray(this.allowedClaim)) { //Gelen/Giden Faturaları görüntüleme yetkileri tümü ve kendisine ait o.ş birden çok olduğu için app.routes'ta array olarak tanımlandı. 
                    for (let i = 0; i < this.allowedClaim.length; i++) {
                        hasClaim = x.hasClaim(this.allowedClaim[i])
                        if (hasClaim)
                            break;
                    }

                    description = this.allowedClaim[0].Description;
                }
                else {
                    hasClaim = x.hasClaim(this.allowedClaim);
                    description = this.allowedClaim.Description;
                }
            });

            if (hasClaim == false) {
                var message = "Bu işlem için yetkiniz yoktur.";
                if (description != undefined) {
                    message = description + ' yetkiniz yoktur.'
                }

                this.store.dispatch(new ui.ToastMessagePushAction({ severity: 'warning', summary: message, detail: '' }));
            }
        }

        return hasClaim;
    }

}

像这样在html上的指令用法；

Directive usage on html like this;

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

推荐答案

通过(click)和HostBinding绑定事件只是意味着将两个独立事件绑定到目标元素，它们将同时被调用，并且不会互相影响，这意味着停止其中任何一个都不会停止另一个.

Binding event by (click) and HostBinding just means binding two standalone events to your target elements, they will be called at the same time and won't give effects to each other which means stop any of them won't stop the other one.

您需要通过HostBinding在指令的点击事件绑定中手动调用点击事件(当前通过(click) 进行绑定.)

You need to call click event(currently binding via (click)) manually in your directive's click event binding via HostBinding.

// 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();
    }
}    

请参见 示例演示 .

See sample demo.

这篇关于指令Angular 2上的停止按钮单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！