Angular7中Observable请求后页面自动刷新问题排查

看起来页面自动刷新的核心问题出在模板里的多余表单标签，以及一些小的代码规范问题。我来一步步拆解：

1. 罪魁祸首：不必要的<form>标签 #

你的模板里用<form>包裹了"Nuevo"按钮，而且按钮是type="submit"类型：

<form class="link right-space">
  <input type="submit" value="Nuevo" class="btn btn-primary" routerLink="/brands/new" />
</form>

submit按钮的默认行为是提交表单，即使你加了routerLink，点击时也会先触发表单提交（导致页面刷新），再执行路由导航。更关键的是，即使你没点击这个按钮，当你在删除确认框中按回车确认时，浏览器焦点回到页面后，也可能意外触发表单的默认提交行为，导致页面刷新。

解决办法：移除表单，改用普通按钮 #

把表单换成普通<div>，同时把submit输入框改成按钮（因为你只是要路由导航，不需要表单提交功能）：

<div class="link right-space">
  <button class="btn btn-primary" routerLink="/brands/new">Nuevo</button>
</div>

2. 模板中的冗余this #

删除按钮的点击事件里加了多余的this，Angular模板中调用组件方法不需要加this，虽然这不会直接导致刷新，但可能引发上下文问题：

<!-- 原代码 -->
<i class="fa fa-trash fa-2x" (click)="this.deleteBrand(brand)" ... ></i>

<!-- 修改后 -->
<i class="fa fa-trash fa-2x" (click)="deleteBrand(brand)" ... ></i>

3. 事件处理函数返回值的潜在问题 #

第一种HTTP调用方式中，你返回了subscribe的结果（一个Subscription对象）：

// 原代码
return this.http.delete(`http://localhost:3000/api/brand/${brand._id}`)
  .subscribe(data => this.deleteElementFromBrands(brand))

浏览器可能会把事件处理函数的返回值误解为需要执行默认行为，虽然i标签没有默认点击行为，但最好避免这种写法，直接调用即可：

// 修改后
this.http.delete(`http://localhost:3000/api/brand/${brand._id}`)
  .subscribe(data => this.deleteElementFromBrands(brand));
// 去掉return

4. 额外建议：添加错误处理 #

为了避免静默失败，建议给HTTP请求的订阅添加错误回调，方便排查潜在问题：

// 第二种调用方式示例
this.brandService.deleteBrand(brand._id)
  .subscribe( 
    res => this.deleteElementFromBrands(brand),
    err => console.error('删除品牌失败:', err) // 添加错误日志
  );

验证方法 #

打开浏览器开发者工具的Network面板，执行删除操作后观察：如果有额外的当前页面GET请求，说明确实是表单提交导致的刷新；修改后这个请求应该会消失，页面只会通过Angular的变更检测更新视图，不会刷新。

内容的提问来源于stack exchange，提问作者José Espejo Roig