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にレースのリストを解決するには（「ハイキング/：名前/レース」 ）私は以前、親コンポーネントでHikeDetailComponent（ 'hikes /：name'）で解決されたハイキングの名前が必要です。 "router-outlet"ディレクティブのために、私はHikeserviceを使用してコンポーネントinit上のデータを渡し/取得することにしました。 しかし、子コンポーネントのルート（ 'hikes /：name/races'）にブラウザをリフレッシュすると、hikes'nameは "未定義"なので、私は自分のracesListをもう解決できません。

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

HikeService.hikeは私の親によって支えられて：

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

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

    constructor(private hikeService:HikeService){} 

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

} 

はここに私の簡単なHikeServiceです：私は私のHikeServiceから取得したデータを渡すことになっているシンプルなリゾルバを実装？：

ソリューションコンポーネントの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