浅谈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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
js 通用订单代码
Dec 23 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
小程序自定义日历效果
Dec 29 Javascript
vue data恢复初始化数据的实现方法
Oct 31 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
python 下划线的不同用法
2020/10/24 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
创先争优活动方案
2014/02/12 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
公司年终奖分配方案
2014/06/16 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
医院护士工作检讨书
2014/10/26 职场文书
打架检讨书范文
2015/01/27 职场文书
2015年维修工作总结
2015/04/25 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书