Angular——路由跳转
前言在Angular的学习使用过程中,路由跳转支撑了项目的全过程,所以路由跳转是一个很常见也是一个很容易忽略的点,所以现在咱们一起来了解一下吧。 叙述Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另外一个页面的行为。对于使用Angular构建的单页应用而言,页面跳转实质上就是从一个配置项跳转到另一个配置型的行为。当某个事件引发了跳转时,Angular会根据跳转时的参数生成一个UrlTree实例来和配置型进行匹配,如果匹配成功则显示相应的组件并将新URL更新在浏览器地址栏上。如果匹配不成功则报错。 Angular应用中进行页面跳转一共有两种方式,使用指令跳转和使用代码跳转。
使用指令跳转指令跳转通过使用RouterLink指令来完成。该指令接收一个链接参数数组,Angular将根据该数组来生成UrlTree实例进行跳转。 <nav>
<a [routerLink]="['/collection']">
<i>收藏</i>
</a>
<a [routerLink]="['/collection']">
<i>收藏</i>
</a>
<nav>
此外,当RouterLink被激活时,还可以通过RouterLinkActive指令为其相应的HTML元素指定CSS类。下面的例子,定义了一个CSS类.active,并通过routerLinkActive将其赋给收藏页的链接。当单击该链接后,.active类将被应用到<a>标签上。实例代码如下:
/* footer.component.css */
.active{
background-color:#3DD689;
}
<!-- footer.component.html-->
<nav>
<a [routerLink]="['/collection']">
<i>收藏</i>
</a>
<a [routerLink]="['/collection']" routerLinkActive="active">
<i>收藏</i>
</a>
<nav>
使用代码跳转如果需要响应其他事件或者需要根据运行时的数据动态决定如何跳转,则可以通过条用Router.navigateByUrl()来完成。 在Html中写代码如下: <div class="form-group">
<button type="submit" class="btn btn-success" (click)="workSpace()">登录</button>
</div>
在login.component.ts中写代码如下:
//login.component.ts
import {Router} from '@angular/router';
export class LoginComponent implements OnInit {
constructor(
public router: Router,) { }
ngOnInit() {
}
/*需要引入import { Router } from '@angular/router'; */
public workSpace():void{
this.router.navigateByUrl("workspace");
}}
小结以上两种路由跳转的方法都很实用,具体分别在什么情况下使用,小编在接下来会继续研究的。欢迎各位大神们的指导哦。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |