angular 中的按钮单击事件问题

Question

⁮我正在尝试将 "disable option" 应用到我的自定义按钮，但是当我将按钮设置为禁用时，点击事件仍然有效。如果按钮启用，我只需要点击事件，如果它被禁用则不需要。

代码：

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

Answer 1

由于您的 myngbutton 不是 html 原生元素，因此它不会像原生按钮那样工作。它被视为具有父类型 HtmlElement 的自定义元素。

disabled html 属性仅适用于 W3School documentation 中描述的元素。这意味着如果您希望您的组件像按钮一样工作，那么您将需要对其进行编程。或者在您的组件中使用原生 <button>。

这是一个例子：

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

Answer 2

问题是，您订阅的 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>

angular 中的按钮单击事件问题

Button click event issue in angular

angular

angular5

angular6