为什么在key.enter Angular之后重新加载页面？答案

【问题标题】：Why page is reloaded after key.enter Angular?为什么在key.enter Angular之后重新加载页面？
【发布时间】：2020-07-29 00:09:10
【问题描述】：

我的模板是：

<form class="navbar-form">
    <div class="input-group no-border">
        <input type="text" #term class="form-control" (keyup.enter)="search($event)" placeholder="поиск..." />
        <button type="button" class="btn btn-white btn-round btn-just-icon" (click)="search($event)">
            <i class="material-icons">search</i>
            <div class="ripple-container"></div>
        </button>
    </div>
</form>

方法search()是：

 search(e): boolean {
    e.preventDefault();
    this.router.navigate(['users']);
}

为什么尽管 e.preventDefault(); 页面在按下回车键后会重新加载？

我已经删除了(keyup.enter)="search($event)" 它仍然会重新加载页面。这意味着在其他地方调用了事件

【问题讨论】：

因为preventDefault()只影响事件，不影响之后的代码。
我知道，但是转到路由页面我得到了重新加载页面。
那么，我认为该问题与您的路由设置有关。可以发在这里吗？
我评论了this.router.navigate(['users']);同样的问题
可能，只要函数不返回任何内容，您就应该删除返回类型。我刚刚测试了您的代码（没有路由器）是否会重新加载。我怀疑你有路由问题，你能发布你的路由配置吗？

标签： angular

【解决方案1】：

问题是<form> 在<input> 之前处理keydown 事件，因此您可以在<input> 上使用keydown.enter。

另外，你的函数没有完全返回boolean，你可以在那里使用void（这不适用于你的问题，只是建议）。

component.html

<form class="navbar-form" >
   <div class="input-group no-border">
     <input type="text" #term class="form-control" 
         (keydown.enter)="search($event)" placeholder="поиск..." />
     <button type="button" class="btn btn-white btn-round btn-just-icon" 
         (click)="search($event)">
          <i class="material-icons">search</i>
          <div class="ripple-container"></div>
     </button>
   </div>
</form>

组件.ts

  search(e): void {
    e.preventDefault();
    this.router.navigate(['users']);
  }

【讨论】：

如果你仍然需要使用 keyup 而不是 keydown，你可以在表单中添加类似
.

【解决方案2】：

使用“双淘汰”策略彻底阻止事件：

e.preventDefault(); 
e.stopPropagation();

【讨论】：

当我点击它时工作正常，当 key.enter 重新加载时
都是代码吗？从输入中删除搜索并再次检查
我已经删除了，它还在重新加载，如何找到捕手在哪里？
请再试一次，将
标签改为
再做一次测试
打开另一个问题会更好吗？顺便说一句，@Suren 的回答比我的要好得多:)