Question

我有一个组件（引导程序模式），我在其中编辑一些信息。然后我使用服务发送它。看起来像这样

this.service.updateCompanyById(companyInfo, this.company.id, this.logoImage)
        .subscribe(
          (data) => {
            this.bsModalRef.hide();
          },
          (err) => console.log(err)
        );

为我服务

updateCompanyById(company, companyId, logoImage?: File) {
    ... some code
    return 

    this.http.post(`${this.domainName}api/companies/update/${companyId}`, formData)
          .do(
            (data) => {
              this.companyUpdated.next()
              this.notificationService.notify('Company updated successfully!');
            }
          );
      }

如您所见，我使用的是Subject，因此另一个组件知道该公司已更新。该组件仅包含使用服务的所有公司的列表。在这个组件中，我有

// list of companies    
this.companiesService.companyUpdated
        .subscribe(
          () => {
            this.getCompaniesFromServer();
          }
        )
    getCompaniesFromServer() {
        this.companiesService.getCompaniesInfo()
          .pipe(
            share()
          )
          .subscribe(
            (data) => {
              this.rows = data;
              console.log(data);
            }
          );
      }

我的问题是所有请求都重复了。

例如：我第一次编辑用户，并在公司列表组件中得到所有用户列表的一个响应。然后在第二次编辑后，我得到两个响应，依此类推。我认为问题出在主题上，但我不明白到底是什么问题。如果可以的话，请帮助我，谢谢。

有人能解释为什么会发生这种现象吗？ @ misha130提出的可能解决方案是添加.pipe（first（））另一个可能的解决方法（尽管我不确定）是添加.pipe（take（1））

Answer 1

在订阅之前添加first（）表示其仅取值一次或在收到订阅后对其进行处置。

这里的问题不是订阅获得了两倍的数据，而是有两个订阅。选项A：

this.companiesService.companyUpdated
        first().subscribe(
          () => {
            this.getCompaniesFromServer();
          }
        )

选项B：

let companyUpdateSubscription: Subscription =  this.companiesService.companyUpdated
            first().subscribe(
              () => {
                this.getCompaniesFromServer();
                companyUpdateSubscription.unsubscribe();
              }
            )

注意：如果选择选项A，出于内存管理的考虑，我仍然会取消订阅onDestroy。

Answer 2

因此，我再次研究了这个问题，并意识到了问题所在和可能的解决方案。我仍然不确定我是否正确。

首先，我对一个主题有两个订阅我有一个功能

onEditCompany(){
    this.companiesService.companyUpdated
        .subscribe(
          (data) => {
            console.log(data);
            this.getCompaniesFromServer();
          }
        );
}

然后在另一个功能中

onCreateCompany() {
      this.companiesService.companyUpdated
            .subscribe(
              (data) => {
                console.log(data);
                this.getCompaniesFromServer();
              }
            );
    }

据我所知，它在一处创建了两个订阅，这就是为什么我有多个请求而不是一个。因此，据我所知，我只需要一个companyUpdated实例，就可以从服务中的更新公司或该服务中的添加公司那里收到它，我认为我只需要移动 .companiesService.companyUpdated 到ngOnInit，因此它将监听更改以添加新公司和更新公司案例。因此，现在看起来像这样：从 onEditCompany（）和 onCreateCompany（）中删除旧代码，并在ngOnInit中编写以下代码：

this.companyUpdatedSubscription = this.companiesService.companyUpdated
        .switchMap(
          () => this.companiesService.getCompaniesInfo()
        )
        .subscribe(
          (data) => this.rows = data
        );

订阅主题时出现双重要求

2 个答案: