Angular2：刷新子组件页面后无法从服务获取数据

Question

这是我的路由器配置：

[
  {
    path:'home',
    component: HomeComponent
  },
  {
    path:'hikes',
    children: [
      {
        path: '',
        component: HikeListComponent
      },
      {
        path: 'hikes/:name',
        component: HikeDetailComponent,
        children: [
         {
           path: 'races',
           children: [
             {
               path:'',
               component:  RaceListComponent,
               resolve: { hike: 'hike'}
             },
             {
               path:':id',
               component: RaceDetailComponent
              }
           }
         ]
       }
    ]
  }
]

问题：要解析我的 RaceListComponent ('hikes/:name/races') 中的比赛列表，我需要先前在其父组件中解析的远足名称：HikeDetailComponent ('hikes/:name')。由于 "router-outlet" 指令，我决定使用 Hikeservice 来 pass/retrieve 组件初始化上的数据，并且它有效。但是如果我在 hikes'name 是 "undefined" 的子组件路由 ('hikes/:name/races') 上刷新浏览器，那么我就不能再解析我的 racesList 了。

解决方案？：我实现了一个简单的解析器，它应该传递从我的 HikeService 检索到的数据：

import { HikeService } from '../Services/contexte.service';

@Injectable()
export class HikeResolver implements Resolve<any> {

  constructor( private hikeService:HikeService){}

  resolve() {
   return this.hikeService.getHike();
  }

}

这是我的简单 HikeService：

@Injectable()
export class HikeService {
 constructor() { }
   public hike;
   public getHike(): void {
    return this.hike;
   }
 }

HikeService.hike 由我在初始化时的父组件提供动力：

this.hikeService.hike = this.hike;

现在在我的子组件 (RaceComponent) 中，我可以从解析器获取数据：

let hikeId = this.route.snapshot.data['hike'].properties.id;

但是，如果我在我的子组件页面上刷新浏览器，我会得到一个异常：

error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'properties' of undefined
TypeError: Cannot read property 'properties' of undefined at RaceComponent.ngOnInit (http://127.0.0.1:4200/main.bundle.js:3872:62) at Wrapper_RaceComponent.ngDoCheck (/AppModule/RaceComponent/wrapper.ngfactory.js:24:53) at CompiledTemplate.proxyViewClass.View_RaceComponent_Host0.detectChangesInternal (/AppModule/RaceComponent/host.ngfactory.js:28:37) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:90216:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:90411:44) at ViewRef_.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:64392:20) at RouterOutlet.activate (http://127.0.0.1:4200/vendor.bundle.js:74782:42) at ActivateRoutes.placeComponentIntoOutlet (http://127.0.0.1:4200/vendor.bundle.js:25870:16) at ActivateRoutes.activateRoutes (http://127.0.0.1:4200/vendor.bundle.js:25837:26) at http://127.0.0.1:4200/vendor.bundle.js:25773:58 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://127.0.0.1:4200/vendor.bundle.js:25773:29) at ActivateRoutes.activateRoutes (http://127.0.0.1:4200/vendor.bundle.js:25838:26) at http://127.0.0.1:4200/vendor.bundle.js:25773:58 at Array.forEach (native)

Answer 1

对于希望子组件等待其数据准备就绪的情况，您可以使用 Angular2 Route Resolve。

以下 link 可能有用：

Resolving Route Data in Angular2

Angular2：刷新子组件页面后无法从服务获取数据

Angular2: Can't get data from service after refreshing page on child component

angular

angular2-routing

angular2-services