Question

我有一个利用服务的组件，该服务内部是对服务器的HTTP调用，其中包含有关产品发行说明的数据。发行说明仅以JSON字符串形式返回。

我希望能够从服务器获取JSON值，然后将服务中的值返回给首先调用该方法的父类。这样，我就可以在父类中使用JSON字符串。

我不确定实现此目标的最佳方法是什么。我应该使用带有父类可以访问的getter的BehaviourSubject吗？如果是这样，我如何改编以下代码以利用行为主题？

服务方法

getLatestReleaseNote() {
    let releaseNoteUrl = this._configService.getConfig().releaseNoteUrl;
    const currentVersion = this.getCurrentVersion();
    releaseNoteUrl += currentVersion.replace(".", "_") + ".json"; 
    const releaseNoteDataStream = this._httpClient.get<string>(releaseNoteUrl).pipe(take(1)); //Need to subscribe or pass to BehaviourSubject
  }

或者，我可以只订阅releaseNoteDataStream可观察对象并从订阅内部返回值吗？像下面吗？

getLatestReleaseNote(): string {
    let releaseNoteUrl = this._configService.getConfig().releaseNoteUrl;
    const currentVersion = this.getCurrentVersion();
    releaseNoteUrl += currentVersion.replace(".", "_") + ".json"; 
    const releaseNoteDataStream = this._httpClient.get<string>(releaseNoteUrl).pipe(take(1)).subscribe(val => 
      {
        return val;
      });
  }

我意识到这是不正确的，但是我不确定如何从订阅返回。

对于第三种选择，我可以使用EventEmitter在订阅具有值时发出字符串值吗？

Answer 1

您最好的选择是使用Angular EventEmitter。即使是发射器也要send data to parent components。它们可以同步也可以异步，以满足您的需求。

此外，您可以使用@Input()装饰器在父组件中获取发行说明，并将其传递给子组件。

Answer 2

您只需在http调用中返回可观察到的结果即可对父类中的数据进行操作，并在父类中进行预订-如下所示-

// parent class method
parentClassMethod() {
    this.releaseNoteService.getLatestReleaseNote().subscribe(data => { // assuming your service was added as constructor parameter
        this.doStuffToData(data); //manipulate the local data in other parts of the parent class - like if data is not a json string, serialize or do JSON.stringify(data)
    });
}

// service class method
getLatestReleaseNote() {
    let releaseNoteUrl = this._configService.getConfig().releaseNoteUrl;
    const currentVersion = this.getCurrentVersion();
    releaseNoteUrl += currentVersion.replace(".", "_") + ".json"; 
    return this._httpClient.get(releaseNoteUrl).pipe(take(1));
  }

注意：确保您的httpClient.get函数是实际的httpClient.get函数

有关评论中的其他建议，请参见： How to pass a callback as a function

Answer 3

使用http时，我对Promise感到满意。因此，我更愿意从服务而不是Observable返回Promise并使用.then(), .catch()回调。

 return this.http.get(this.categoryURL, v)
    .map(response => response.json())
    .toPromise();

可观察变量的一个优点是，您可以取消请求。选中Angular - Promise vs Observable

从服务的HTTP调用返回值的最佳方法，以便可以在父组件中使用它？

3 个答案: