《Angular路由跳转之指令跳转》

前言:

   随着ITOO项目的深入,前端框架Angular的应用也在不断加深,路由的跳转分为两个部分,一个是代码跳转,另外一个是指令跳转。此篇是继上次代码跳转的姊妹篇。接下来请听小编娓娓道来。

正文:      

指令跳转

   指令跳转是通过使用RouterLink指令来完成的。该指令接收一个链接参数数组,Angular将根据该数组来生成UrlTree实例进行跳转。

目的

点击左侧栏按钮,跳转相应模块

《Angular路由跳转之指令跳转》

三步走战略

第一步:配置路由

left-nav.routes.ts

《Angular路由跳转之指令跳转》

说明:

    相应的路由配置其与代码跳转是一致的,差别在于跳转的实现形式。

第二步:配置模块加载文件

left-nav.module.ts

《Angular路由跳转之指令跳转》

第三步:跳转代码

left-nav.componetn.html

《Angular路由跳转之指令跳转》

说明:

1.上图中规划出了两种实现指令跳转的形式,在具体实践中都可以运用

2.代码中的链接地址均是从根路由开始,然后具体定位到某模块。

PS:至此就完成了使用指令跳转的路由跳转。

实现如下图所示:

《Angular路由跳转之指令跳转》

《Angular路由跳转之指令跳转》


结语:

   其实并不难!