前言:
随着ITOO项目的深入,前端框架Angular的应用也在不断加深,路由的跳转分为两个部分,一个是代码跳转,另外一个是指令跳转。此篇是继上次代码跳转的姊妹篇。接下来请听小编娓娓道来。
正文:
指令跳转
指令跳转是通过使用RouterLink指令来完成的。该指令接收一个链接参数数组,Angular将根据该数组来生成UrlTree实例进行跳转。
目的:
点击左侧栏按钮,跳转相应模块
三步走战略
第一步:配置路由
left-nav.routes.ts
说明:
相应的路由配置其与代码跳转是一致的,差别在于跳转的实现形式。
第二步:配置模块加载文件
left-nav.module.ts
第三步:跳转代码
left-nav.componetn.html
说明:
1.上图中规划出了两种实现指令跳转的形式,在具体实践中都可以运用
2.代码中的链接地址均是从根路由开始,然后具体定位到某模块。
实现如下图所示:
结语:
其实并不难!