等待数据完全加载以在 angular2 或 4 中继续

Question

我正在开发一个从 API 请求用户信息的应用。

在“list-all”组件中，ngOnInit 仅获取 ID 和用户名以在列表中显示所有内容。

当我点击用户名时，我需要展开并加载其余的用户信息。但问题是视图在数据完全加载之前呈现。

试过这个：

解决方案1：如果我创建另一个组件并在 ngOnInit 上进行加载，它可以工作，但我不想创建另一个组件。

solution2：使用 BehaviorSubject 来控制数据加载的时间，效果很好。但是每次当我点击另一个用户时，订阅功能都会比上次多调用一次。对于第一个，他只调用 subscribe 函数中的所有内容 1 次，第二个 2 次，依此类推。

我如何知道数据何时已完全加载？

我不知道你们能不能理解我的疑惑，希望你们能理解。但是任何问题都对此发表评论。

服务中的功能

 carregaObservacoes(avId: number, colabId: number) {
    this.observacoesCarregadas.next(false);
    this.http.request(this.host + '/observacoes/' +
      avId + '/' + colabId)
      .map(res => res.json())
      .subscribe(obs => {
        this.observacoes = obs;
        this.observacoesCarregadas.next(true);
      });
  }

在组件中

this.observacaoService.carregaObservacoes(this.avaliacao.id , colabId);
    this.observacaoService.observacoesCarregadas.subscribe(estado => {
      if (estado) {
        this.observacoes = this.observacaoService.getObservacoes();
        this.compilaObservacao();
        this.etapa = success;
      }
    });

Answer 1

Angular 数据 resolver 来救援！

你可以像下面这样使用它：

定义解析器：

@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]
})
class AppModule {}

并使用以下方法获取组件中的数据：

this.route.data.pluck('team').subscribe(team => this.team = team).

在解析数据之前，组件不会渲染！