Question

我创建了一个is-login.directive

<button type="button" appIsLogin (click)="sayHello()">
 down
</button>

成分</ P>

  sayHello() {
    console.log('clicked');
}

是-login.directive.ts

import {Directive, HostListener} from '@angular/core';

@Directive({
selector: '[appIsLogin]'
})
export class IsLoginDirective {

isLoginIn = false;

constructor() {
}

@HostListener('mousedown', ['$event'])
onClick(event: Event): boolean {
    if (!this.isLoginIn) {
        console.log('mousedown');
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
    return true;
}

目前的行为当我点击按钮时，两个事件都发生了。我希望点击事件不会发生。

console

我希望通过指令监控用户的点击事件，如果用户未登录，则不执行点击事件。

Answer 1

试试这个：

@SuppressWarnings("unchecked")

Answer 2

您可以禁用指针事件：

this.elRef.nativeElement.classList.add('disabled');

然后在组件CSS中：

.disabled {
  pointer-events: none;
}

Answer 3

我是通过将pointerEvents样式设置为none来完成的：

import {Directive, HostListener} from '@angular/core';

@Directive({
    selector: '[appIsLogin]'
})
export class IsLoginDirective {

    isLoginIn = false;

    constructor(element: ElementRef) {
    }

    @HostListener('click')
    onClick() {
       if (!this.isLoginIn) {
           this.element.nativeElement.style.pointerEvents='none';
       }
    }
}

如何防止按钮点击事件

3 个答案: