angular - 关闭元素后边缘浏览器刷新 - Angular 5

Question

我在表单上有两个按钮

<button *ngIf="!loader" type="submit" class="custom-button blue left">Update</button>
<button (click)="close()" class="custom-button red left">Close</button>

在 Chrome 中一切正常，但在 Edge 中单击“关闭”按钮后，我的整个页面都会刷新。

这是我的 .ts 文件

export class InventoryDetailsComponent implements OnInit {
  @Input() inventoryDetails: boolean;
  **@Output() inventoryDetailsChange = new EventEmitter<boolean>();**
  @Output() update = new EventEmitter();

  close () {
    this.inventoryDetailsChange.emit(false);
  }

我在 Edge 中遇到的任何错误都是

Unable to get property 'handleEvent' of undefined or null reference polyfills.bundle.js (4262,17)

我不明白为什么 Edge 在这个事件中崩溃

问题在于按钮上的错误类型，我的两个按钮都是 type='button'，这让 EDGE 感到困惑，我为提交按钮添加了 type='submit' 并防止我的浏览器崩溃

Answer 1

通常的问题是，只要在任何表单内单击“提交”类型的按钮，MS Edge 就会提交表单。这实际上是可以理解的，但在 SPA 应用程序中效果不佳，因为它意味着刷新页面。

评论中提到了第一个可能的答案，作者将其添加到他的问题中:将按钮类型从“提交”更改为“按钮”。

第二个答案是使用 event.preventDefault()在按钮的处理程序中。

所以在这种情况下:

<button (click)="close($event)" class="custom-button red left">Close</button>

close (event) {
    event.peventDefault();
    this.inventoryDetailsChange.emit(false);
  }

更改按钮类型并不总是一个好主意。例如。如果您希望您的用户只能通过使用键盘(单击 Enter)提交表单，则您需要在表单内有一个提交按钮。