Angular rxjs可观察重用逻辑

我正在写一个角度文件上传组件

上传成功后，将显示一个通知和两个按钮：

• replace

  ：删除上载的文件并打开文件选择器对话框

• 删除

  ：删除上载的文件并显示通知

删除上传的文件意味着向后端系统发出HTTP DELETE请求，并处理可能的故障和重试

_handleReplace() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => openFileSelectorDialog())
  );
}

_handleRemove() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => displayNotice())
  );
}

在这段代码中，我没有处理可能的失败和重试

_handleReplace() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => openFileSelectorDialog())
  );
}

_handleRemove() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => displayNotice())
  );
}

如何提取删除逻辑以避免在两种方法中重复

或者更一般地说，我如何在两个不同的观测值上应用公共变换

---

谢谢大家!

可以使用管道方法创建如下自定义操作符：

deleteFile = () => pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName))
  );    

_handleReplace() {
  this.replaceClicked$.pipe(
    deleteFile(),
    tap((x) => openFileSelectorDialog())
  );
}

_handleRemove() {
  this.replaceClicked$.pipe(
    deleteFile(),
    tap((x) => displayNotice())
  );
}

管道功能应从rxjs导入：

import { pipe } from "rxjs";

---

谢谢，从你的例子中，我做了更多的研究，我发现这篇文章提供了更多的上下文