浅谈angularJS2中的界面跳转方法

链接参数数组保存路由导航时所需的成分：

指向目标组件的那个路由的路径（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中的界面跳转方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • AngularJS实现单一页面内设置跳转路由的方法

    本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码

  • AngularJS页面带参跳转及参数解析操作示例

    本文实例讲述了AngularJS页面带参跳转及参数解析操作.分享给大家供大家参考,具体如下: 页面带参跳转 $scope.LoginSucessLocation = function () { var hre = 'http://ctb.qingguo.com/weixinCt/main#/upload_topic_start?uid=' + $scope.uid + '&orgcode=' + $scope.orgCode; location.href = hre; } 在url的后面,增加?

  • angularjs项目的页面跳转如何实现（5种方法）

    Angular页面传参有多种办法,根据不同用例,我举5种最常见的: PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码. 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数

  • 浅谈angularJS2中的界面跳转方法

    链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL 我们可以把RouterLink指令绑定到一个数组,就像这样: <a [routerLink]="['/heroes']">Heroes</a> 在指定路由参数时,我们写过一个双元素的数组,就像这样: this.router.navigate(['/hero', hero.id]); 我们可以在对象中提供可选的路由参数,就像这样:

  • 浅谈Springmvc中的页面跳转问题

    SpringMvc跳转问题 SpringMvc的Controller每次处理完数据后都会返回一个逻辑视图(view)和模型(model) 所以我们会看到原生的Controller是返回一个ModelAndView(内部包含了view和model). 正常情况下(除非被@ModelAttribute注解了的方法),否则最终都会返回ModelAndView. 当然有时候一个功能处理方法不一定要返回一个逻辑视图,也可以重定向到另一个功能方法 服务器内部转发到一个逻辑视图或者另一个功能方法. --- S

  • 浅谈PHP中try{}catch{}的使用方法

    PHP中try{}catch{}的作用是用来处理异常.可以为我们收集并显示出错误信息.希望通过这篇文章的介绍,大家能掌握这一语句的应用. 在PHP语言中有许多语法需要我们去不断的熟悉,然后才能灵活的运用,编写我们需要的代码程序.在这篇文章中我们将为大家介绍PHP中try{}catch{}的用法. <?php try { //... } catch(Exception $e) { //... } ?> PHP中try{}catch{}是异常处理. 将要执行的代码放入TRY块中,如果这些代码执行过

  • 浅谈MySQL中group_concat()函数的排序方法

    浅谈MySQL中group_concat()函数的排序方法

    group_concat()函数的参数是可以直接使用order by排序的.666.. 下面通过例子来说明,首先看下面的t1表. 比如,我们要查看每个人的多个分数,将该人对应的多个分数显示在一起,分数要从高到底排序. 可以这样写: SELECT username,GROUP_CONCAT(score ORDER BY score DESC) AS myScore FROM t1 GROUP BY username; 效果如下: 以上这篇浅谈MySQL中group_concat()函数的排序方法就

  • 浅谈js中StringBuffer类的实现方法及使用

    如下所示: <strong>JAVA中有一个StringBuffer类,js中却没有下面来自己实现一个简单的js的StringBuffer类.</strong> //创建一个StringBuffer类 ,此类有两个方法:一个是append方法一个是toString方法 function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.append = function(str) { this.__s

  • 浅谈JavaScript 中有关时间对象的方法

    ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返

  • 浅谈python中真正关闭socket的方法

    close方法可以释放一个连接的资源,但是不是立即释放,如果想立即释放,那么在close之前使用shutdown方法 shut_rd() -------关闭接受消息通道 shut_wr()--------关闭发送消息通道 shut_rdwr()-------连个通道都关闭 使用:在close()之前加上shutdown(num)即可  [shut_rd(), shut_wr(), shut_rdwr()分别代表num 为0  1  2 ] (但是测试过close()关闭,发现如果关闭后,那么ac

  • 浅谈dataframe中更改列属性的方法

    在读取文件时将整数变量读成了字符串, 或者需要转换列属性时,通过方法astype Python中 举例: dataframe.numbers=dataframe.numbers.astype(float) province.id=province.id.astype(str) R中 举例: data<-read.csv('data.csv',col.names = c('id','sex','numbers'),stringsAsFactors=FALSE),stringsAsFactors=F

  • 浅谈Vue中插槽slot的使用方法

    浅谈Vue中插槽slot的使用方法

    如何定义和使用: 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加slot='插槽名字',就可以将指定的标签放到指定的插槽内,插槽内可以是任意内容. 举例: <!DOCTYPE html> <html lang="en"> <head&

  • 浅谈controller中调用多个service方法的问题

    目录 controller调用多个service方法 controller调用service中方法的一些事物问题 controller调用多个service方法 一般service方法是有事务的,把所有操作封装在一个service方法中是比较安全的. 如果在controller中调用多个service方法,只有查询的情况下是可以这样的. controller调用service中方法的一些事物问题 关于在开发过程中的事务传播的一个问题: controller 调用service中a方法,a方法没有

随机推荐