Question

我想在开始渲染组件之前从服务器获取异步数据。我试图使用路线解析器，但我不知道它是如何帮助的。

我可以使用：

通过ActivatedRoute访问组件中的解析器数据

ngOnInit() {
this.route.data.subscribe((data : Data) => {
  this.caseDataManager.setCase(data['casedata']);
});

组件在“subscribe”中的异步代码完成之前进行初始化和呈现。

这样做的正确方法是什么？

更新：我的解析器代码：

import { Injectable } from '@angular/core'
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
import { Observable } from 'rxjs/Observable'
import { Server } from '../shared/server.service'

@Injectable()
export class WorkspaceResolver implements Resolve<any>  {

constructor(private server : Server) {}

resolve(route : ActivatedRouteSnapshot, state : RouterStateSnapshot) : Observable<any>  {
    return this.server.loadCase(route.params['caseid']); #loadCase is basically "return this.http.get(API_URL+'/case/'+caseid).map(resp => resp.json()"
}

}

Answer 1

您必须在component.ts上将您的resolve函数订阅到ngOnInit（）方法并获取component.html上的每个项目。因此，您的组件将从其初始化中获取数据并进行渲染。

constructor(private myService: APIService) {}

  ngOnInit() {
    this.myService.getService()
      .subscribe(response => this.data = response);
  }

Answer 2

你的解析器看起来很好。现在你需要在你的路线中使用它：

path: '/some/path',
component: SomeComponent,
resolve: {
  workspace: WorkspaceResolver
}

不要忘记提供解析器。

现在在显示组件之前获取数据。

使用解析程序在组件渲染之前获取异步数据

2 个答案: