角度(Angular):routerLink实现导航的几种方式,以及它们的优缺点

Angular2的路由模块来自@ angular / router,它不包含在Angular2的核心模块中。因此,如果要学习angular2的路由功能,则必须导入此模​​块。

几种导航方法的概述:

Home1
Home2
Home 2.2 
Home3
Home4
Home5
Home6

绑定到最后一个导航方法的onSelect()方法:

onSelect() {
    this.router.navigate(['../home'],{relativeTo:this.route});
 }

现在让我们逐一分析这些导航方法:

所有以斜杠开头的人都必须使用绝对路径进行导航。换句话说,我们将导航到该路径,这是绝对的。通常,我们不使用此方法。如果您不使用绝对路径,请记住不要以斜杠开头。

乍一看,这与第一个相同,但让我们看一下routerLinkActive。第一个是单个属性,第二个用作属性命令。另一个重要的一点是,如果使用属性指令,则在分配属性指令时,必须在方括号内添加单引号。这是为什么?因为如果我们不添加单引号或双引号,那么Angular会认为这是一个变量并将其用作变量。

您可以看到此routerLink使用相对路径,您可以参考第七条BG真人 ,该相对路径实际上是当前路由,该相对路径是相对路径。使用当前路线作为相对导航的起点。举一个简单的例子,我们当前的路径是/ dashboard / chart,现在我们必须导航到home(背景:chart和home都是仪表板下的组件,属于同一级别)安徽快3 ,然后我们将使用两个点..代表。点表示相对当前路径,两个点表示相对父路径。

通过说明导航,您可以参考第一个。绝对路径导航

按指令进行导航德甲下注 ,您可以参考第一个和第三个,routerLink指令和采用的相对路径方法。

与第5条相同。浏览角度脚本。

 this.router.navigate(['../home'],{relativeTo:this.route});       // 如果要使用相对导航,必须加上relativeTo属性,并且赋值为route,route是ActivatedRoute的值
// 如果采用绝对路径,那么不需要添加这个属性。如果以斜线开头,并且定义了这个relativeTo属性会出现什么的?其实还是绝对路径优先,relativeTo没有起作用

通过简单的分析,让我们看一下我们通常使用哪种导航方式?

通常,我们不直接定义用于导航的绝对路径。造成这种情况的原因很多:

1.当绝对路径很长时凤凰彩票代理 ,很容易犯错误;

2.不容易移植。

然后使用相对路径,实际上存在许多问题:

1.由于angular2组件是可重用和可嵌套的,因此,如果我们想导航到某个组件相对导航相对导航,由于我们的父子关系,相对导航路径可能会不一致;

2.由于angular2路由的嵌套关系,并且相同的组件可以重复嵌套到不同的级别,这导致我们的组件重用远没有我们想像的那么广泛。

老王
地址:深圳市福田区国际电子商务产业园科技楼603-604
电话:0755-83586660、0755-83583158 传真:0755-81780330
邮箱:info@qbt8.com
地址:深圳市福田区国际电子商务产业园科技楼603-604
电话:0755-83174789 传真:0755-83170936
邮箱:info@qbt8.com
地址:天河区棠安路288号天盈建博汇创意园2楼2082
电话:020-82071951、020-82070761 传真:020-82071976
邮箱:info@qbt8.com
地址:重庆南岸区上海城嘉德中心二号1001
电话:023-62625616、023-62625617 传真:023-62625618
邮箱:info@qbt8.com
地址:贵阳市金阳新区国家高新技术开发区国家数字内容产业园5楼A区508
电话:0851-84114330、0851-84114080 传真:0851-84113779
邮箱:info@qbt8.com