Проблема события нажатия кнопки в угловых

Question

 Я пытаюсь применить «опцию отключения» к своей пользовательской кнопке, но когда я отключаю кнопку, событие нажатия все еще работает.Мне нужно только событие щелчка, если кнопка включена, а не если она отключена.

Код:

<myngbutton [disabled]="disabled3" (click)="alertMsg()">Save 3</myngbutton>

Answer 1

Проблема в том, что событие click, на которое вы подписываетесь, - это не событие click для элемента кнопки, а щелчок по элементу myngbutton.Вам необходимо добавить источник событий в ваш myngbutton компонент, который излучает при щелчках button элементов:

myngbutton.component.ts:

@Component({...})
export class MyngbuttonComponent {
   [...]

   @Output() onClick = new EventEmitter();
   [...]

}

myngbutton.component.html:

<button [...] (click)="onClick.emit()">[...]</button>

app.component.html:

<myngbutton [disabled]="disabled1" (onClick)="alertMsg()">Save 1</myngbutton>

Answer 2

Поскольку ваш myngbutton не является нативным HTML-элементом, он не будет действовать как нативная кнопка.Он рассматривается как пользовательский элемент с родительским типом HtmlElement.

Атрибут disabled html работает только с элементами, описанными в документации W3School .Это означает, что если вы хотите, чтобы ваш компонент работал как кнопка, вам нужно будет его запрограммировать.Или используйте собственный <button> внутри вашего компонента.

Вот пример:

<!-- Won't enter the alertMsg method if it is disabled -->    
<myngbutton [disabled]="disabled3" (click)="!disabled3 && alertMsg()">Save 3</myngbutton>