Угловой компонент: отключить событие клика

Question

Я создаю компонент многократного использования, подобный этому:

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

Я бы хотел отключить событие click, когда свойство isDisabled имеет значение true, я пробовал что-то подобное, но оно не работает.

пакеты / компонент / мой-button.component.html

<button  [disabled]="isDisabled" #myButton>
        <ng-content></ng-content>
</button>

пакеты / компонент / My-button.component.ts

@ViewChild('uxButton') uxButton: ElementRef;
@Input() isDisabled: boolean = false;

this.myButton.nativeElement.parentNode.removeEventListener('click' , (e) => {
       e.stopPropagation();
});

Answer 1

попробуй вот так

<button  [disabled]="isDisabled" (click)="btnClick.emit($event)">
        <ng-content></ng-content>
</button>

@Input() isDisabled: boolean = false;
@Output() btnClick = new EventEmitter();

Используйте Output и по умолчанию событие нажатия кнопки не будет работать, если кнопка отключена. воспользоваться этим

<my-button [isDisabled]="isDisabled" (btnClick)="click($event)"> submit </my-button>

Answer 2

Вы можете проверить его по атрибуту (click):

<my-button [isDisabled]="isDisabled" (click)="!isDisabled && click($event)"> submit </my-button>

Answer 3

Вы должны использовать свойство [disabled], как указано в документации :

<button [disabled]="isDisabled" (click)="disableButton()">Disable button</button>

А затем в своем коде

export class AppComponent  {
  isDisabled = false;

  disableButton() {
    this.isDisabled = true;
    // your code...
  }
}

Проверьте StackBlitz для демонстрации.

Answer 4

Я думаю, проблема в вашем коде:

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

должно быть

<my-button [disabled]="isDisabled" (click)="click($event)"> submit </my-button>

Answer 5

Мы можем addeventlistener / удалить в зависимости от необходимости с помощью ElementRef / HostListener, однако простое исправление будет следующим:

click(event) {
if (this.isDisabled) {
return;
}
......
}