如何让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