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

【问题标题】：Angular 2 components gets loaded before route is resolvedAngular 2 组件在路由解析之前被加载
【发布时间】：2017-01-20 16:38:18
【问题描述】：

组件的 ngOninit 在 getReport 服务返回数据之前被命中。它不会等待服务被解析。

路由：

 @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 之前被命中

【问题讨论】：

标签： angular angular2-routing angular2-services

【解决方案1】：

resolve 应该返回 Observable，而不是 Subscription。实际上你的resolve 没有返回任何东西，但是你不应该在Observable 上调用subscribe()，因为这会返回一个Subscription。

如果您需要在返回之前处理该值，请改用map((val) => ...) 或其他一些运算符。

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

【讨论】：

很高兴听到 :) 感谢您的反馈。