《Angular路由跳转之指令跳转》
来源:互联网 发布:网络结婚主持台词 编辑:程序博客网 时间:2024/05/21 07:58
前言:
随着ITOO项目的深入,前端框架Angular的应用也在不断加深,路由的跳转分为两个部分,一个是代码跳转,另外一个是指令跳转。此篇是继上次代码跳转的姊妹篇。接下来请听小编娓娓道来。
正文:
指令跳转
指令跳转是通过使用RouterLink指令来完成的。该指令接收一个链接参数数组,Angular将根据该数组来生成UrlTree实例进行跳转。
目的:
点击左侧栏按钮,跳转相应模块
三步走战略
第一步:配置路由
left-nav.routes.ts
说明:
相应的路由配置其与代码跳转是一致的,差别在于跳转的实现形式。
第二步:配置模块加载文件
left-nav.module.ts
第三步:跳转代码
left-nav.componetn.html
说明:
1.上图中规划出了两种实现指令跳转的形式,在具体实践中都可以运用
2.代码中的链接地址均是从根路由开始,然后具体定位到某模块。
PS:至此就完成了使用指令跳转的路由跳转。
实现如下图所示:
结语:
其实并不难!
阅读全文
0 0
- 《Angular路由跳转之指令跳转》
- 【Angular】路由跳转(代码跳转)
- 【Angular】路由跳转问题;
- angular 路由跳转读取参数
- Angular——路由跳转
- angular路由跳转(笔记)
- ionic之路由跳转
- angular设置路由实现无刷新跳转
- angular路由跳转,并获取参数问题
- angular-route注入 路由的页面跳转
- angular 未登录状态拦截路由跳转
- 《Angular2路由跳转之代码跳转》
- 《Angular之表格选中跳转》
- angular 跳转
- 路由跳转
- 汇编之跳转指令笔记
- angular-单页面跳转/路由参数传递ngRoute
- 【Angular】——灵活权限下门户路由跳转
- 1104. Sum of Number Segments (20)
- hdu2083 简易版之最短距离(C语言)
- python初级操作:类,函数
- strcpy等函数的模拟实现
- Spring通过dataSource获取数据库的连接测试
- 《Angular路由跳转之指令跳转》
- NSArray实战
- C++实现TCP通信
- 开源库MOGRE托管版编译教程
- ViewPager初识
- 关于附件上传
- 11.C 语言连接 MySQL
- SQL函数与自定义函数
- 设计模式之工厂模式