浅谈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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
jquery easyui使用心得
Jul 07 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 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检测接口Traversable用法详解
2017/12/29 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python super用法及原理详解
2020/01/20 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
党的群众路线教育实践活动总结
2014/10/30 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
数据设计之权限的实现
2022/08/05 MySQL