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

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

1 个答案: