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");
  }

}