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');

显然，此示例不有效，因为return中的getConfig()发生在config填充subscribe()之前。< / p>

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

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

Answer 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');
}

Answer 2

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

您可以自定义此操作，无需导入路径args

    @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

在Service中解析HttpComponent结果

2 个答案: