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()">