Làm thế nào để Angular2 chờ lời hứa trước khi kết xuất thành phần

Question

Đầu tiên: Có, tôi đã google trước đây, và solution xuất hiện không hoạt động đối với tôi.

Bối cảnh

Tôi có một 2 phần góc mà các cuộc gọi một dịch vụ, và cần phải thực hiện một số thao tác dữ liệu khi nó nhận được phản hồi:

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

Trong mẫu của nó, dữ liệu đó là được chuyển đến thành phần con:

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

Điều này gây ra lỗi khi trẻ nhận được myData là không xác định. Kết quả của Google đã đăng các cuộc thảo luận ở trên về cách sử dụng Resolver nhưng điều đó không hiệu quả đối với tôi.

Khi tôi tạo ra một phân giải mới:

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

tôi nhận được một lỗi mà không có nhà cung cấp cho MyDataResolver. Đây vẫn là trường hợp khi tôi thêm MyDataResolver đến providers tài sản trong app.component.ts:

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

đã giao diện cho việc sử dụng này đã thay đổi?

Answer 1

Bộ định tuyến hỗ trợ lời hứa hoặc có thể quan sát được từ resolve().
Xem thêm https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

này nên làm những gì bạn muốn:

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

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

Xem thêm https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard