我有一个页面上有多个表单,每个表单上有许多按钮。我想在按钮被按下后实现加载旋转器。当我使用普通的点击事件时,可以传递按钮:
HTML
在这种情况下,按钮元素会被传递并且您可以访问它以添加一个 loading 类到该按钮。
然而,如果您尝试使用提交按钮做同样的事情,它将被视为 undefined:
HTML
在这种情况下,按钮是
以下是一个Stack Blitz示例:https://stackblitz.com/edit/angular-zh7jcw-mrqaok?file=app%2Fform-field-overview-example.html 我尝试向保存按钮添加另一个单击事件来设置按钮为加载状态,但是单击事件先触发,并在阻止提交事件被调用之前将按钮设置为禁用状态。
我已查看提交事件,但没有找到任何与所点击的按钮相关的内容。
有什么建议吗?
HTML
<button #cancelButton class="button-with-icon" type="button" *ngIf="hasCancel" mat-raised-button color="warn" [disabled]="isLoading" (click)="clickEvent(cancelButton)">
<mat-spinner *ngIf="isLoading" style="display: inline-block;" diameter="24"></mat-spinner>
Cancel
</button>
TS
clickEvent(button: MatButton) {
console.log(button);
}
在这种情况下,按钮元素会被传递并且您可以访问它以添加一个 loading 类到该按钮。
然而,如果您尝试使用提交按钮做同样的事情,它将被视为 undefined:
HTML
<form (ngSubmit)="save(saveButton)">
<button #saveButton class="button-with-icon" type="submit" *ngIf="hasSave" mat-raised-button color="primary" [disabled]="isLoading">
<mat-spinner *ngIf="isLoading" style="display: inline-block;" diameter="24"></mat-spinner>
Save
</button>
</form>
TS
save(button: MatButton) {
console.log(button);
}
在这种情况下,按钮是
undefined
,因为按钮上的*ngIf
将其从表单的范围中屏蔽掉了。我可以删除*ngIf
并隐藏按钮,但这会使按钮留在DOM中,我不想这样做。以下是一个Stack Blitz示例:https://stackblitz.com/edit/angular-zh7jcw-mrqaok?file=app%2Fform-field-overview-example.html 我尝试向保存按钮添加另一个单击事件来设置按钮为加载状态,但是单击事件先触发,并在阻止提交事件被调用之前将按钮设置为禁用状态。
我已查看提交事件,但没有找到任何与所点击的按钮相关的内容。
有什么建议吗?