Jak sprawić, by Angular2 czekał na obietnicę przed renderowaniem komponentu

Question

Po pierwsze: Tak, wcześniej go wyszukałem, a wygenerowany solution nie działa dla mnie.

Kontekst

mam kątowym 2 komponent, który wywołuje usługę, a musi wykonać pewną manipulację danych po otrzymaniu odpowiedzi:

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

W szablonie, że dane przekazywane do komponentu potomnego:

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

Powoduje to błąd, że dziecko otrzymuje myData jako niezdefiniowany. Opublikowany powyżej wynik Google mówi o użyciu Resolver, ale to nie działa dla mnie.

Kiedy tworzę nową resolverowi:

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); 

pojawia się błąd, że nie ma dostawcą dla MyDataResolver. Jest jeszcze sprawa, gdy dodam MyDataResolver do nieruchomości providers w app.component.ts:

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

Posiada interfejs za pomocą tego zmienić?

Answer 1

Router obsługuje obietnicę lub obserwowalną zwrócony z resolve().
Zobacz także https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

powinien to zrobić co chcesz:

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

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

Zobacz także https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard