浅谈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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
使用Vue生成动态表单
Nov 26 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
详解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将回调函数作用到给定数组单元的方法
2014/08/19 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Prototype Function对象 学习
2009/07/12 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python脚本开机自启的实现方法
2019/06/28 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
Java基础面试题
2014/07/19 面试题
运动会获奖感言
2014/02/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
服务承诺书
2015/01/19 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
地道战观后感2000字
2015/06/04 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书