在解析路由之前加载Angular 2组件

时间:2017-01-18 18:43:07

标签: angular angular2-routing angular2-services

在getReport服务返回数据之前,组件的ngOninit被点击。它不等待服务被解析。

路由:

 @Injectable()
class ReportResolver implements Resolve<any> {
constructor(private reportsService: ReportsService) {
}
resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): any {
    this.reportsService.GetReport(route.params["id"]).subscribe((data: any) => {
        return data;
    });
}}

const appRoutes: Routes = [
{
    path: "reports/:id",
    component: TabularReportsFachadeComponent,
    resolve: { report: ReportResolver }
},
{
    path: "",
    component: DashboardComponent
},];

服务:

GetReport(id: any): Observable<any> {
    return this._http.get("api/reports/?" + id).map(res => res.json());
}

成分:

 ngOnInit(): void {
    debugger
    this.report = this.route.snapshot.data["report"].data;

}

组件ngOninit在getReport

之前被点击

1 个答案:

答案 0 :(得分:1)

resolve应该返回Observable,而不是Subscription。实际上,resolve并未返回任何内容,但您不应在subscribe()上致电Observable,因为这会返回Subscription

如果您需要在返回之前处理该值,请改用map((val) => ...)或其他操作符。

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): any {
    return this.reportsService.GetReport(route.params["id"])
}}