Angular2学习笔记之Router篇

chenping9318

墨衍会员 · AI 创作全网分发码龄10年

关注

转载最新推荐文章于 2026-09-07 17:59:34 发布 246 阅读 AI 写同款· GEO 优化 ›

Angular2 Router

angular2的Router组件从beta版本到rc版发生了很大的变化，rc2到rc4也有着不小的变动。本文主要是针对最新的RC4版本的学习笔记。

Angular 2中的Router的负责在各个Component之间导航跳转，传递参数。 Angular 2作为一个单页网站开发框架，它所有的的内容呈现其实都是在一个页面上(index.html), 那么为什么正在页跳转的时候，URL。

<base href>标签

使用Router的第一步是添加“<base href>”标签，为Router指明项目的根目录.“<base href>”标签应该添加到index.html文件的"<head>"标签中，作为其第一个子元素。如果app文件夹是项目的根目录其格式为：

<head>
    <base href="/">
</head>

<base>是HTML标签，它的作用是指明当前页面所有相对路径URL的基础路径。设置根目录的目的是帮助Angualr 2调用浏览器的history.pushState接口，用于导航。

引入Router Directives

import {ROUTER_DIRECTIVES} from '@angular/router';

Router配置

Router如何知道哪一个URL对应哪一个Component呢？答案是通过路由配置，Angualr2的路由配置信息是一个Javascript Object数组组成的，由RouterConfig定义。

export const routes: RouterConfig = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent }
];

配置中path为url地址，path对应的url值是不能以“/”开始，component是该url对应的Component。
设置好Router信息后，需要将配置传入到provideRouter方法中。

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

导入刚刚编写的Router配置到main.ts文件中

import { bootstrap }            from '@angular/platform-browser-dynamic';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

<router-outlet>标签

router将会把url对应component的内容展示在“<router-outlet></router-outlet>”标签中，我们还可以为<router-outlet>标签命名。

routerLink

在常规的html中，我们使用"<a href>"标签来放置链接地址，但是在angular 2项目中，如果要使用Router实现页页面跳转我们需要使用 routerLink

<a [routerLink]="['/crisis-center']">Crisis Center</a>

Restful URL

利用Router我们可以轻松的构建Restful的应用，在这里使用官方文档的例子，通过url “/hero/{id}”,可以取得指定id的hero的信息，router的定义如下：

{path: 'hero/:id', component: HeroDetailComponent}

url跳转可以直接使用routerLink的方式：

<a [routerLink]="['/hero/1']">Batman</a>

更常见的方式是利用Typescript代码实现router跳转

let id = 5
router.navigate(['/hero', id]);

接收url参数，angular2 鼓励使用“订阅者模式”来接收url参数

let id: number;
let sub = route.params.subscribe(params =>  
    id = +params['id'] // 加号的作用是将字符串转化为数字
)

使用订阅者模式的好处是可以是component得到复用，当下次用一个全新的id跳转到该component时，angular不用再创建一个全新的component，只需要更新component中与id相关的内容就好了。使用订阅者模式需要注意的是，在component结束时，需要手动释放subscribe，否则会导致内存泄漏。