浅谈angularJS2中的界面跳转方法


Posted in Javascript onAugust 31, 2018

链接参数数组保存路由导航时所需的成分:

指向目标组件的那个路由的路径(path)

必备路由参数和可选路由参数,它们将进入该路由的URL

我们可以把RouterLink指令绑定到一个数组,就像这样:

<a [routerLink]="['/heroes']">Heroes</a>

在指定路由参数时,我们写过一个双元素的数组,就像这样:

this.router.navigate(['/hero', hero.id]);

我们可以在对象中提供可选的路由参数,就像这样:

<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>

这三个例子覆盖了我们在单级路由的应用中所需的一切。在添加一个像危机中心一样的子路由时,我们创建新链接数组组合。

回忆一下,我们曾为危机中心指定过一个默认的子路由,以便能使用这种简单的RouterLink。

<a [routerLink]="['/crisis-center']">Crisis Center</a>

让我们把它分解出来:

数组中的第一个条目标记出了父路由('/crisis-center')。

这个父路由没有参数,因此这步已经完成了。

没有默认的子路由,因此我们得选取一个。

我们决定跳转到CrisisListComponent,它的路由路径是'/',但我们不用显式的添加它。

哇!['/crisis-center']。

在下一步,我们会用到它。这次,我们要构建一个从根组件往下导航到“巨龙危机”时的链接参数数组:

数组中的第一个条目用来标记出父路由('/crisis-center')。

这个父路由没有参数,因此这步已经完成了。

数组中的第二个条目('/:id')用来标记出到指定危机的详情页的子路由。

详细的子路由需要一个id路由参数。

我们把巨龙危机的id添加为该数组中的第二个条目(1)。

看起来是这样的:

<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

如果想,我们还能单独使用危机中心的路由来重定义AppComponent的模板。

template: `
 <h1 class="title">Angular Router</h1>
 <nav>
 <a [routerLink]="['/crisis-center']">Crisis Center</a>
 <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
 <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
 </nav>
 <router-outlet></router-outlet>
`

总结:我们可以用一级、两级或多级路由来写应用程序。 链接参数数组提供了用来表示任意深度路由的链接参数数组以及任意合法的路由参数序列、必须的路由器参数以及可选的路由参数对象。

以上这篇浅谈angularJS2中的界面跳转方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python判断文本中消息重复次数的方法
2016/04/27 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python sorted方法和列表使用解析
2019/11/18 Python
python实现超市商品销售管理系统
2019/11/22 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
历史学专业推荐信
2013/11/06 职场文书
全运会口号
2014/06/20 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
工程进度款催款函
2015/06/24 职场文书
python如何正确使用yield
2021/05/21 Python