等待订阅完成设置公共变量答案

【问题标题】：Waiting for subscription to complete setting a public variable等待订阅完成设置公共变量
【发布时间】：2019-02-07 21:32:03
【问题描述】：

在我的组件上，我从我的服务中获得了一些翻译。
该服务调用 MVC API 控制器。

组件上的代码：

  private getTranslations(): void {
    this._translationService.getTranslations('Foo');
  }

服务上的代码：

  public translations: Translation[] = new Array<Translation>();

  public getTranslations(action: string) {
    this._http.get<Translation[]>(this.baseUrl + action).subscribe(
      (result: Translation[]) => {    
         result.forEach(element => {
            this.translations.push(element);
         });
      },
      (error: any) => this._loggerService.logError(error)
    );
  }

在服务中，它为订阅中的变量this.translations 设置一个值。
如何在我的组件中等待它“完成”，这意味着公共变量 this.translations 已设置？

我看到一个线程将其包装在 new Promise() 中，但在我的示例中我无法弄清楚。任何方法都可以。

【问题讨论】：

返回一个 observable 并订阅它？您不必在服务内订阅。或者使用单独公开结果/完成的模式；参见例如blog.jonrshar.pe/2017/Apr/09/async-angular-data.html.
一种方法是在 observable 上使用 pipe 方法和 finlalize 方法，如 some_observable.pipe(finalize(() => {/*callback method body*/})).subscribe(...)。

标签： javascript typescript asynchronous rxjs

【解决方案1】：

您可以从您的服务返回observable：

 public translations: Translation[] = new Array<Translation>();

 public getTranslations(action: string) {
    return new Observable((observer) => { // <-- return an observable
      this._http.get<Translation[]>(this.baseUrl + action).subscribe(
        (result: Translation[]) => {    
           result.forEach(element => {
              this.translations.push(element);
           });

           observer.complete(); // <-- indicate success
        },
        (error: any) => {
          this._loggerService.logError(error);
          observer.error(error); // <-- indicate error
        }
      );
    });
  }

并订阅组件：

  private getTranslations(): void {
    this._translationService.getTranslations('Foo').subscribe({
      error: () => { /* handle error */ },
      complete: () => { /* handle complete */ },
    });
  }

【讨论】：