浅谈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 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
js new Date()实例测试
Oct 31 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
Python用户自定义异常的实现
2020/12/25 Python
HTML5标签小集
2011/08/02 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
super()与this()的区别
2016/01/17 面试题
文员自我评价怎么写
2013/09/19 职场文书
员工自我鉴定范文
2013/10/06 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
教师个人剖析材料
2014/02/05 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS