0

考虑典型的 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');

显然，这个例子不起作用，因为returningetConfig()发生之前config被填充到subscribe().

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

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

4

2 回答 2

1

请试试：

您的服务：

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');
}
于 2018-02-04T12:05:37.677 回答
0

在这种情况下，建议使用解析器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

于 2018-02-04T09:43:51.463 回答