如何讓Angular2在渲染組件之前等待諾言

Question

首先：是的，我已經事先谷歌搜索，並且solution出現了不適合我。

語境

我有一個角2成分調用的服務，並且需要一旦接收到該響應執行一些數據操作：

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

在其模板中，該數據是傳遞給子組件：

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

這是導致孩子出錯的錯誤myData未定義。上面發佈的谷歌結果談到了使用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。這仍是如此，當我在app.component.ts添加MyDataResolver到providers屬性：

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

一直使用這個接口改變了嗎？

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