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 来传递/检索组件 init 上的数据，并且它可以工作。 但是，如果我在子组件路由（'hikes/:name/races'）上刷新浏览器时，hikes'name 是“未定义”，所以我无法再解析我的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 由我的父组件在 init 上提供支持：

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。

以下链接可能有用：

• Resolving Route Data in Angular2