[英]Angular2: Can't get data from service after refreshing page on child component
这是我的路由器配置:
[
{
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')上刷新浏览器时,hips'name是“ undefined”,因此我无法再解析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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.