Angular 在解析路由之前加载了 2 个组件
Angular 2 components gets loaded before route is resolved
组件的 ngOninit 在 getReport 服务 returns data.It 没有等待服务被解析之前被命中。
路由:
@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 之前被命中
resolve
应该 return 一个 Observable
,而不是 Subscription
。实际上你的 resolve
没有 return 任何东西,但是你不应该在 Observable
上调用 subscribe()
因为这个 return 是 Subscription
。
如果您需要在 returning 之前处理该值,请改用 map((val) => ...)
或其他运算符。
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): any {
return this.reportsService.GetReport(route.params["id"])
}}
组件的 ngOninit 在 getReport 服务 returns data.It 没有等待服务被解析之前被命中。
路由:
@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 之前被命中
resolve
应该 return 一个 Observable
,而不是 Subscription
。实际上你的 resolve
没有 return 任何东西,但是你不应该在 Observable
上调用 subscribe()
因为这个 return 是 Subscription
。
如果您需要在 returning 之前处理该值,请改用 map((val) => ...)
或其他运算符。
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): any {
return this.reportsService.GetReport(route.params["id"])
}}