Angular 2動畫導致頁面重新加載

Question

我有

<div class="style1" *ngIf="data" [@slideInLeft]="slideInLeft">
  <form [formGroup]="form1" class="form" *ngIf="form1">
....
     <button [disabled]="this.isUpdating === true" type="submit" class="btn btn-default" (click)="cancelClicked()">Cancel</button>
  </form>
</div>

import { slideInLeft } from 'ng-animate';

animations: [trigger('slideInLeft', [transition('* => *', useAnimation(slideInLeft))])]

當我顯示表格時，動畫工作正常。 單擊取消后，頁面將重新加載。

如果我完全刪除動畫，則不會重新加載頁面。

有誰知道為什么會這樣嗎？

Answer 1

如果您遇到了重擊或重現該問題的方法，我認為我可以驗證我的理論。 我猜想這可能與您將取消按鈕的type屬性設為“提交”有關。 這與表單的自然工作方式矛盾，“提交”按鈕應該提交表單，而不是取消表單。

在純HTML中，提交按鈕將執行action屬性定義的所有操作，請在此處查看https://www.w3schools.com/html/html_forms.asp

我要嘗試的第一件事是使cancel button的type屬性為“ button”，所以<button type="button>並查看是否有幫助。如果您想通過角度方式處理Submit操作，則應通過<form (ngSubmit)="takeSomeAction()">