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

问题描述

我使用 angular 2 和 PrimeNG 构建了我的应用程序.我尝试使用按钮单击指令来检查用户权限.问题是;如果没有权限，不要继续按钮点击动作.但是 stopPropagation 不会停止单击事件.如果 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?

块引用

@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>

推荐答案

Binding event by (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 手动调用点击事件(currently binding via (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屋！