如何在不多次订阅的情况下从服务中获取新的更新值

Question

我有一个 Angular 服务，它有一个方法可以在我订阅它时返回详细信息，但是为了获得新值，我必须每次都订阅它，我认为这并不理想。

服务方法的样子，

details.service.ts

getDetails(id: string): Observable<any> {
    return this._http
      .post<any>('baseUrl/detail', { id });
}

组件看起来像，

list.component.ts

getDetails() {
    this._detailsService.getDetails(this.id).subscribe(
      (detail) => {
        // logic here...
      },
      err => console.log(err)
    );
  }

为了获得更新的详细信息，我每次都必须致电getDetails()，这会导致多次订阅。我想避免多次订阅。

Answer 1

我相信您有正当理由在这样的函数中调用服务（可能会刷新数据）。

因此，我建议您将take(1) 传递给this._detailsService.getDetails(this.id)。在订阅中，您可以将结果绑定回您的组件模型。

take(1) 会在服务成功后立即取消订阅，因此您不必担心多个尾随订阅。

例子：

public details: any;
getDetails() {
    this._detailsService.getDetails(this.id).pipe(take(1)).subscribe(
      (detail) => {
        // logic here...
        this.details = detail;
      },
      err => console.log(err)
    );
  }

Answer 2

ngOnInit() 是您执行一次性初始化功能的地方。

您可以从这里调用所有订阅代码。

Answer 3

您可以将订阅放在构造函数或 ngOnit 中以避免这种情况。

constructor() { 
this._detailsService.getDetails(this.id).subscribe(
          (detail) => {
            // logic here...
          },
          err => console.log(err)
        );
}
or 
ngOnInit() {
this._detailsService.getDetails(this.id).subscribe(
              (detail) => {
                // logic here...
              },
              err => console.log(err)
            );
  }

Answer 4

从ngOnInit() 调用getDetails 函数。它只会执行一次。

检查角度lifecycle-hooks。

ngOnInit(){
    this.getDetails(); // one time initialize
}

getDetails() {
    this._detailsService.getDetails(this.id).subscribe(
      (detail) => {
        // logic here...
      },
      err => console.log(err)
    );
  }