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,否则会导致内存泄漏。
sub.unsubscribe()