Angular2 (RC4) 路由与导航详解
基础知识
1.<base href>
大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素。
2.导入路由库
import { router_directives } from '@angular/router';
3.配置
首选方案是用带“路由数组”的providerouter工厂函数（[providerouter(routes)]）来启动此应用。
app.routes.ts
import { providerouter, routerconfig } from '@angular/router';
const routes: routerconfig = [
{ path: 'crisis-center', component: crisiscentercomponent },
{ path: 'heroes', component: herolistcomponent },
{ path: 'hero/:id', component: herodetailcomponent },
{ path: '**', component: pagenotfoundcomponent }
];
export const approuterproviders = [
providerouter(routes)
];
routerconfig是一个路由数组，它决定如何导航。每个route会把一个 url 的 path映射到一个组件。
path不能使用斜杠/开头。路由器会为我们解析和生成url。
第三个路由中的id是一个路由参数的 token。
第四个路由中的**代表路由是一个通配符路径。如果当前无法匹配上我们配置过的任何一个路径，路由器就会匹配上这一个，类似于 switch中的default。当需要显示 404 页面，该特性非常有用。
我们将配置好的routes数组传给providerouter（）函数，这个函数返回一个经过配置的 router服务提供商
最后通过 approuterproviders数组导出这个提供商，以便在main.ts中简单的注册路由器依赖。
在 main.ts中的bootstrap函数中注册路由器的提供商。
main.ts
// main entry point
import { bootstrap } from '@angular/platform-browser-dynamic';
import { appcomponent } from './app.component';
import { approuterproviders } from './app.routes';
bootstrap(appcomponent, [
approuterproviders
])
.catch(err => console.error(err));
4.<router-outlet>
上面的配置完成后，当 url 变为 /heroes时，路由器就会匹配到path为heroes的route，并且在宿主视图中的<router-outlet>中显示herolistcomponent组件。
5.[routerlink]
我们在<a>标签中添加了routerlink指令，可以一次性绑定到我们路由中的path值。
如果routerlink想要绑定动态信息，我们就可以把它绑定到一个能够返回路由链接数组的模板表达式上。路由器最终会把此数组解析成一个 url 和一个组件视图。
我们还可以往<a>中添加一个routerlinkactive指令，用于在相关的routerlink被激活时所在元素添加或移除css类。该指令可以直接添加到该元素上，也可以直接添加到其父元素上。
appcomponent模板
template: ` <h1>component router</h1> <nav> <a routerlink="/crisis-center" routerlinkactive="active">crisis center</a> <a routerlink="/heroes" routerlinkactive="active">heroes</a> </nav> <router-outlet></router-outlet> `,
6.路由器状态
在每个导航的生命周期完成时，路由器会构建出一个 activatedroute组成的树，它表示路由器的当前状态。我们可以在应用中任何使用 router服务及其 routerstate属性来访问当前的routerstate值。
7.router_directives
routerlink、routerlinkactive和routeroutlet是router_directives集合中的指令，所以需要在@component元数据中加入到directives数组中。
directives: [router_directives]
以上就是对angular2 (rc4) 路由与导航的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！