コンポーネントをレンダリングする前にAngular2が約束を待つ方法

Question

最初に：これはあらかじめGoogleでグーグルされており、現れたsolutionは私のために働いていません。

コンテキスト

私はサービスを呼び出し、それが応答を受信すると、いくつかのデータ操作を実行する必要がある角度2の成分があります。そのテンプレートで

ngOnInit() { 
    myService.getData() 
    .then((data) => { 
     this.myData = /* manipulate data */ ; 
    }) 
    .catch(console.error); 
} 

、データがあることを子コンポーネントに渡されました：

<child-component [myData]="myData"></child-component> 

これは、子がmyDataは未定義です。上に掲載されたGoogleの結果はResolverの使用について話していますが、それは私のためには機能しません。

私は新しいリゾルバ作成する場合：

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { MyService } from './my.service'; 

@Injectable() 
export class MyResolver implements Resolve<any> { 
    constructor(private myService: MyService) {} 

    resolve (route: ActivatedRouteSnapshot): Observable<any> { 
     return Observable.from(this.myService.getData()); 
    } 
} 

app.routing.ts

const appRoutes: Routes = [ 
    { 
    path: 'my-component', 
    component: MyComponent, 
    resolve: { 
     myData: MyDataResolver 
    } 
    } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

を私はMyDataResolverのためのプロバイダが存在しないというエラーが発生します。

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    providers: [ 
     MyService, 
     MyResolver 
    ] 
}) 

がこれを利用するためのインタフェースが変更された：私はapp.component.tsにprovidersプロパティにMyDataResolverを追加するとき、これはまだケースですか？

Answer 1

ルータは、resolve()から返された約束または観測可能性をサポートしています。
も参照https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

これは、あなたが欲しいものを行う必要があります。

@Injectable() 
export class MyResolver implements Resolve<any> { 
    constructor(private myService: MyService) {} 

    resolve (route: ActivatedRouteSnapshot): Promise<any> { 
     return this.myService.getData(); 
    } 
} 

も参照してくださいhttps://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard