浅谈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写的评论分页(还不错)
Dec 23 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
js选项卡的制作方法
Jan 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
js实现批量删除功能
Aug 27 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python实现复制大量文件功能
2019/08/31 Python
如何在sublime编辑器中安装python
2020/05/20 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
Spy++的使用方法及下载教程
2021/01/29 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
逃课上网检讨书
2014/02/20 职场文书
物资采购方案
2014/06/12 职场文书
劳模事迹材料范文
2014/12/24 职场文书
正确使用MySQL update语句
2021/05/26 MySQL