Angular2之路由学习笔记

目前工作中项目的主要技术栈是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");
  }

}