浅谈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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
一分钟理解js闭包
May 04 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
如何手写一个简易的 Vuex
Oct 10 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php中error与exception的区别及应用
2014/07/28 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
Python实现的购物车功能示例
2018/02/11 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python获取整个网页源码的方法
2020/08/03 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
大专生的学习自我评价
2013/12/04 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python