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

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

检查角度lifecycle-hooks。

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

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

如何在不多次订购的情况下从服务中获得新的更新价值

4 个答案: