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了解并不深入,无法给出详细解释,待我深入了解后,再写一篇关于路由的文章奉献给大家。
转载于:https://www.cnblogs.com/dojo-lzz/p/5883408.html
Angular2学习笔记——在子组件中拿到路由参数相关推荐
- element子组件中的校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...
- Flutter学习笔记--Gridview网格组件制作相册
Flutter学习笔记–Gridview网格组件制作相册 效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...
- vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
- Go语言开发学习笔记(持续更新中)
Go语言开发学习笔记(持续更新中) 仅供自我学习 更好的文档请选择下方 https://studygolang.com/pkgdoc https://www.topgoer.com/go%E5%9F% ...
- JS学习笔记六:js中的DOM操作
1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
- Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识 能够掌握自定义指令创建和使用 学习内容: 学习目录: 组件进阶 自定义指令 今日总结 面试题 知识点自测 组件创建, 注册和使用 - 伸手就来特别熟练 指令的作用 1 ...
- vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录 组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
- 原生微信小程序父组件调用子组件中的方法
假设子组件中写有方法getData() // 返回数据 getData() {let flag = this.onStartValidate();if (!flag) return falselet ...
- React 父组件和子组件中的方法相互调用
目录 父组件调用子组件方法 子组件调用父组件方法 父组件调用子组件方法 父组件中调用子组件的getTree方法 父组件 setFormValue=()=>{this.TreeList.getTr ...
最新文章
- 图解YARN--大数据平台技术栈17
- .net中6个重要的基础概念:Stack, heap, Value types, reference types, boxing and Unboxing.
- synchronized概念
- 【MySQL】主从复制架构方案 - 笔记
- 【CodeForces - 569B】Inventory (水题)
- 腐蚀rust研究台抽奖_中石化青岛安工院专家分享延迟焦化装置的腐蚀风险分析!...
- 遇见未来 | MongoDB增强事务支持,向NewSQL的方向迈进
- 关于ListView中Detail模式下的一些基本操作
- 小狗扫地机器人与石头_石头扫地机器人 T7:使用一周后的真实测评报告
- 大数据分析-第十二章 Spark与数据分析
- keil5生成bin文件和axf文件
- 设置oracle sys密码修改,Oracle修改SYS密码
- android怎么防8门神器,八门神器怎么使用?安卓八门神器教程
- Company interview process
- 访问网页出现503服务器,503错误,详细教您网页出现503错误怎么解决
- 应用调试(三)oops
- how do java play sql_讲解:Invadem、Java、Java、game mechanicsSQL|Processing
- 30天自制OS学习笔记 (四)C语言与画面显示的练习
- 2步释放esp32c3的GPIO11
- java线程安全的list_Java的List如何实现线程安全?