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中遇到的任何错误都是

无法获取未定义或空引用的属性'handleEvent' 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）提交表单，则需要在表单内部添加一个提交按钮。

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

1 个答案: