[英]Angular2: Can't get data from service after refreshing page on child component
here's my router configuration: 这是我的路由器配置:
[
{
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
}
}
]
}
]
}
]
Problem:To resolve the list of races in my RaceListComponent ( 'hikes/:name/races' ) i need the hikes' name previously resolved in its parent component: HikeDetailComponent ( 'hikes/:name'). 问题:要解析我的RaceListComponent中的比赛列表(“ hikes /:name / races”),我需要事先在其父组件中解析的远足名称:HikeDetailComponent(“ hikes /:name”)。 Because of "router-outlet" directive i've decided to use a Hikeservice to pass/retrieve data on component init, and it works.
由于“ router-outlet”指令的存在,我决定使用Hikeservice在组件init上传递/检索数据,并且它可以正常工作。 But if i refresh the browser when on child component route('hikes/:name/races') that hikes'name is "undefined" so i can t resolve my racesList anymore.
但是,如果我在子组件路线('hikes /:name / races')上刷新浏览器时,hips'name是“ undefined”,因此我无法再解析racesList。
Solution?: I implemented a simple resolver that is supposed to pass data retrieved from my HikeService: 解决方案?:我实现了一个简单的解析器,该解析器应该传递从我的HikeService检索的数据:
import { HikeService } from '../Services/contexte.service';
@Injectable()
export class HikeResolver implements Resolve<any> {
constructor( private hikeService:HikeService){}
resolve() {
return this.hikeService.getHike();
}
}
Here's my simple HikeService: 这是我简单的HikeService:
@Injectable()
export class HikeService {
constructor() { }
public hike;
public getHike(): void {
return this.hike;
}
}
HikeService.hike is fueled by my parent component on init: HikeService.hike在初始化时由我的父组件推动:
this.hikeService.hike = this.hike;
Now in my child component (RaceComponent) i can get data from the resolver: 现在,在我的子组件(RaceComponent)中,我可以从解析器获取数据:
let hikeId = this.route.snapshot.data['hike'].properties.id;
But Still, if i refresh the browser on my child component page, i get an exception: 但是,即使我在子组件页面上刷新浏览器,也会出现异常:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.