在 Service 中解析 HttpComponent 结果

Question

考虑典型的 HttpClient 示例

服役中

  config: string[];

  load(): Observable<string[]> {
     return this.http.get<string[]>('./assets/config.json');
  }

  getConfig(key: string): string {
     if (!this.config) {
        this.load.subscribe(data => this.config = data);
     }
     return this.config[key];
  }

在组件中

 value = myService.getConfig('blah');

显然，此示例不会起作用，因为 getConfig() 中的 return 发生在 config 被填充到 [=15= 之前].

所有示例在调用组件中显示 subscribe()。但是我如何等待 return inside 服务？

注意这只是 MCVE。实际上，用例要复杂得多，不是如何在应用程序启动之前获取值。例如，我需要从服务器获取一个大数组，然后在服务中根据一些条件进行过滤，return到组件

Answer 1

在这种情况下，建议使用解析器https://angular.io/api/router/Resolve

你可以自定义这个，不需要导入路由参数

    @Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})

来自angular.io

Answer 2

请尝试：

您的服务：

async getConfig(key: string): Promise<number> {
  if (!this.config) {
     const response = await this.load().toPromise();
     this.config = response.json();
  }
  return this.config[key];
}

你的组件：

async ngOnInit() {
  let config = await this.yourService.getConfig('blah');
}

在 Service 中解析 HttpComponent 结果

Resolve HttpComponent result inside Service

angular-services

angular

angular-observable