Angular路由跳转异常：删除客户端后无法跳转到指定页面

核心问题 #

你的代码存在两个关键逻辑错误：

1. 服务中提前执行了路由跳转，导致组件还未完成HTTP请求的订阅就被销毁，subscribe的next回调永远无法触发；
2. 路由跳转逻辑放在服务中违背了单一职责原则，服务应仅负责数据交互，路由属于UI层逻辑，需放在组件中处理。

修正步骤 #

1. 修改服务代码：移除服务内的路由跳转，让服务仅处理HTTP请求

deleteClientHttp(id: number){
  return this.http.delete(`${this.url}/${id}`);
}

2. 修改组件代码：在请求成功的回调中执行路由跳转，确保删除操作完成后再跳转

// 先确保组件已注入Router
import { Router } from '@angular/router';

constructor(private clientService: ClientService, private router: Router) {}

onDeleteClient(id: number) {
  const ok = confirm(`Do you want to delete the client with id: ${id}`)
  if (ok) {
    this.clientService.deleteClientHttp(id)
      .subscribe({
        next: () => {
          alert(`Client removed successfully`);
          this.router.navigate(['/test']); // 请求成功后执行跳转
        },
        error: (err) => {
          alert(`Error!!`);
        }
      });
  }
}

3. 验证路由配置：你的路由配置已正确包含test路径，只需确认TestComponent已正确导入到路由模块中，避免因组件未导入导致的意外跳转。

额外说明 #

Angular的HTTP请求返回的是冷Observable，只有调用subscribe()时才会发起实际请求，因此必须确保订阅动作在组件销毁前完成，且后续逻辑（如跳转）需放在请求回调内执行。

内容的提问来源于stack exchange，提问作者DaniEspinoza