Angular中通过userId同时删除关联User与Contact模型数据问题

当前删除逻辑失败的核心原因是参数传参错误：DeleteContact接口要求传入Contact表自身的主键id，但代码中直接传入了关联的userId，接口无法匹配到对应记录，导致Contact删除失败。
另外原有代码采用嵌套subscribe的写法编写异步逻辑，不符合RxJS编码规范，存在内存泄漏风险。

方案1：前端适配现有接口（无需修改后端） #

步骤1：新增按userId查询Contact的服务方法 #

首先在ContactService中新增方法，根据关联的userId查询对应的Contact记录，拿到Contact的主键id：

// contact.service.ts 中新增
GetContactByUserId(userId: string): Observable<Contact> {
  // 若后端接口返回的是符合userId过滤的Contact列表，可调整返回类型为Observable<Contact[]>，取第一个元素即可
  return this.http.get<Contact>(`${this.baseUrl}${this.ContactsUrl}`, {
    params: { userId }
  });
}

步骤2：重构删除逻辑，串联异步请求 #

使用RxJS算子替代嵌套订阅，先查询关联Contact拿到正确主键，再执行两个删除操作，全部完成后跳转页面：

// 组件文件顶部引入所需RxJS工具
import { switchMap, forkJoin } from 'rxjs';

// 组件内删除方法
deleteUser(userId: string) {
  this.contactService.GetContactByUserId(userId)
    .pipe(
      switchMap(contact => {
        // 无关联Contact时直接删除User
        if (!contact?.id) {
          return this.usersService.DeleteUser(userId);
        }
        // 存在关联Contact时，传入Contact自身主键执行删除
        return forkJoin({
          user: this.usersService.DeleteUser(userId),
          contact: this.contactService.DeleteContact(contact.id)
        });
      })
    )
    .subscribe({
      next: () => {
        this.router.navigate(['login']);
      },
      error: (err) => {
        // 可在此处添加删除失败的用户提示
        console.error('账号删除失败:', err);
      }
    });
}

适配多Contact场景 #

如果业务中一个User对应多个Contact，只需要调整查询方法返回Contact数组，遍历拿到所有Contact的id批量删除即可：

// 调整查询方法返回类型
GetContactsByUserId(userId: string): Observable<Contact[]> {
  return this.http.get<Contact[]>(`${this.baseUrl}${this.ContactsUrl}`, {
    params: { userId }
  });
}

// 删除逻辑中调整为批量删除
switchMap(contacts => {
  const deleteContactStreams = contacts.map(c => this.contactService.DeleteContact(c.id));
  return forkJoin([
    this.usersService.DeleteUser(userId),
    ...deleteContactStreams
  ]);
})

方案2：后端级联删除（最优实践） #

如果可以修改后端逻辑，建议直接在User删除接口中实现级联删除：后端接收到userId后，先删除该userId关联的所有Contact记录，再删除User记录，前端仅需调用一次DeleteUser接口即可完成全部删除操作，无需额外查询Contact，减少前后端交互成本，也能避免前端逻辑疏漏导致的脏数据。

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