Angular2学习笔记——在子组件中拿到路由参数
2016-09-18 22:59
507 查看
工作中碰到的问题,特此记录一下。
Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如:
如果是在AppComponent中,很容易使用`ActivatedRoute`拿到当前路由获取参数:
但如果是在`children`中指定的component要拿到路由参数就没那么容易了,这时候再使用ActivatedRoute根本拿不到参数,我猜应当是在Angular2中一个ActivatedRoute对应一级路由配置,所以我们需要找到父级路由,由父级路由去拿参数。这时我们需要借用Router类的routeState属性的parent方法:
至此问题解决!
Angular2给我的感觉是大框架很清晰,细节太琐碎,使用后端开发思维来做前端,过于冗余。目前对Angular2了解并不深入,无法给出详细解释,待我深入了解后,再写一篇关于路由的文章奉献给大家。
Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如:
export const appRoutes: RouterConfig = [{ path: 'app/:id', component: AppComponent, children: [ { path: 'share', component: AppShareComponent }, { path: 'issue', component: AppIssueComponent }, { path: 'version', component: AppVersionComponent }, { path: 'usage', component: AppUsageComponent }, { path: 'notification', component: AppNotificationComponent }, { path: 'resource', component: AppResourceComponent }, { path: 'comment', component: AppCommentComponent }, { path: 'activity', component: AppActivityComponent }, { path: 'retire', component: AppRetireComponent }, { path: '', component: AppComponent } ] }];
如果是在AppComponent中,很容易使用`ActivatedRoute`拿到当前路由获取参数:
ngOnInit() { this.route.params.subscribe((params) => { this.createPies(); this.onTopListFilterChange(params['id']); }); };
但如果是在`children`中指定的component要拿到路由参数就没那么容易了,这时候再使用ActivatedRoute根本拿不到参数,我猜应当是在Angular2中一个ActivatedRoute对应一级路由配置,所以我们需要找到父级路由,由父级路由去拿参数。这时我们需要借用Router类的routeState属性的parent方法:
this.router.routeState.parent(this.activatedRoute).params.subscribe(params => { this.getDetailsById(params['id']); })
至此问题解决!
Angular2给我的感觉是大框架很清晰,细节太琐碎,使用后端开发思维来做前端,过于冗余。目前对Angular2了解并不深入,无法给出详细解释,待我深入了解后,再写一篇关于路由的文章奉献给大家。
相关文章推荐
- Angular2学习笔记——在子组件中拿到路由参数
- vue路由只变化参数页面组件不更新问题
- 解决多个路由绑定同一个组件 获取参数只获取一次的方法
- 详解react如何在组件中获取路由参数
- react如何在组件中获取路由参数?this.props.params.id
- kohana路由目录作为参数
- vue路由跳转传参数demo
- 关于rails路由中的:as 参数
- Angular07 路由的工作流程、路由参数、子路由
- Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致
- vue嵌套路由-query传递参数(三)
- 最好用Unity粒子系统组件主要参数浅析
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- 路由与网络连通性(二)路由参数及管理 推荐
- IIS URL重写模块和ASP.NET路由组件比较
- Laravel路由中不固定数量的参数如何实现?
- 如何给组件添加事件并传递参数
- vue router动态路由下让每个子路由都是独立组件的解决方案
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- JavaEE开发之SpringMVC中的路由配置及参数传递详解