Остановить нажатие кнопки «Стоп» по директиве Angular 2 - PullRequest
Новая
       14

Остановить нажатие кнопки «Стоп» по директиве Angular 2

0 голосов
/ 16 мая 2018

Я создал свое приложение с Angular 2 и PrimeNG.Я пытаюсь использовать директивы по нажатию кнопки для проверки полномочий пользователя.Проблема есть;если нет полномочий, не продолжайте действие нажатия кнопки.Но stopPropagation не останавливает событие click.Как остановить процесс, если checkAuth () возвращает false?

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 как здесь; 

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

1 Ответ

0 голосов
/ 16 мая 2018

Связывание события с помощью (click) и HostBinding просто означает привязку двух автономных событий к целевым элементам, они будут вызваны одновременно, и не будет влиять друг на друга , что означает остановкуни один из них не остановит другого.

Вам необходимо вызвать событие click ( в настоящее время привязка через (click)) вручную в привязке события click вашей директивы через 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.cancelBuble = true;
        event.stopImmediatePropagation();

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

См. образец демо .

...