リゾルバを使用してコンポーネントレンダリング前の非同期データを取得する

Question

コンポーネントのレンダリングを開始する前に、サーバから非同期データをフェッチしたいとします。私はルートリゾルバを使用しようとしましたが、それがどのように役立つかはわかりません。

私が使用してActivatedRouteを経由してコンポーネントにリゾルバデータにアクセスすることができます。

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

コンポーネントを完了GET「購読」の中に初期化し、非同期コードの前にレンダリングされ得ます。

これを行う正しい方法は何ですか？

UPDATE：私のリゾルバコード：

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に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 
} 

リゾルバを用意することを忘れないでください。

これで、コンポーネントが表示される前にデータがフェッチされました。