Question

⁮我正在尝试对自定义按钮应用“禁用选项”，但是当我将按钮设置为“禁用”时，单击事件仍在起作用。如果按钮处于启用状态，我只需要单击事件，而禁用按钮则不需要。

代码：

<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>

角度按钮单击事件问题

2 个答案: