在 "getter" 方法 Angular 7 服务中从 HttpGet 请求获取结果

Question

这可能非常简单，但 Angular 并不是我的强项，而且我花费的时间比我预期的要多一些。我有一个调用外部 API 的服务，我想在应用程序初始化时获取变量并在多个其他组件中使用它。

我有以下服务：

import { Injectable } from '@angular/core';
import { HttpClient } from  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DatabaseConnectionService {

  API_URL: string = "http://localhost:4044";

  apiResult;

  constructor(private http: HttpClient) { 
    this.dbConn.getApiRoot()
    .subscribe(
      data => this.apiResult = { message: data['message'] }
    );
  }

  getApiRoot() { 
    return this.http.get<Apiroot[]>(this.API_URL);
  }

  returnApiResult() {
    return this.apiResult;
  }

}

在任何其他组件中，我需要能够调用 returnApiResult() 并获取变量的值，但它 returns 为空，因为它是一个可观察的（我认为应该已经分配了，因为它在服务的构造函数中）。感谢任何帮助。

Answer 1

在您的构造函数中，像这样更改代码：

  import { shareReplay } from 'rxjs/operators';

  //...

  constructor(private http: HttpClient) { 
    this.apiResult = this.dbConn.getApiRot().pipe(shareReplay());
  }

通过使用shareReplay运算符，它将在多个订阅者之间共享结果，并重放结果。这样，您的组件仍然可以订阅：

  this.service.apiResult.subscribe(() => console.log("Done"))

但是数据只需要在应用程序加载时由服务加载一次

在 "getter" 方法 Angular 7 服务中从 HttpGet 请求获取结果

Get result from HttpGet Request in "getter" method Angular 7 service

angular

angular7