目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案。
这篇笔记主要记录Angular2 的路由。
官方文档链接:https://angular.cn/docs/ts/latest/guide/router.html (中文版)
https://angular.io/docs/ts/latest/guide/router.html (英文原版)
这里讲的路由主要是应用于页面间的跳转。
1.最常用最简单的
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
routerLink属性,点击a标签后直接跳转到"/heroes"。这里不一定是a标签,也可以是button、div等等。
routerLinkActive属性,不是必须,该属性值为一个CSS类名。作用是当路由跳转到"/heroes"后,给该a标签增加该"active"样式。一般用于如下场合,“随笔”就自动增加了"active"样式
2.后退
一般的浏览器都有后退功能,但也可以自己写一个,统一风格。
import { Location } from '@angular/common'; export class Back { constructor(private location: Location) { } back() { this.location.back(); } }
然后在html中写个(click) = "back()"即可
3.很多时候,场景、需求决定了不能在html中使用routerLink。需要执行一些js逻辑程序后再跳转。
import { Router } from '@angular/router'; export class RouteComponent { constructor(private router: Router) { }
jump(){
this.router.navigate(["/hero"]);
}
jump1(){
this.router.navigateByUrl("/home/hero");
}
}