路由 - 应用步骤

在Angular2中使用路由的功能，有三个步骤：

1. 配置路由

为组件注入Router对象并通过config()方法配置路由：

router.config([
  {path:"/video", component:EzVideo},
  {path:"/music", component:EzMusic}])

上面的代码中，配置了两条路由：

• 如果用户请求路径为/video，那么将在路由出口中激活组件EzVideo
• 如果用户请求路径为/music，那么将在路由出口中激活组件EzMusic

2. 设置路由出口

路由出口是组件激活的地方，使用RouterOutlet指令在组件模板中声明出口：

@View({
    directives:[RouterOutlet],
    template : `<router-outlet></router-outlet>`
})
class EzApp{...}

3. 执行路由

使用Router的navigate()方法可以执行指定路径的路由，在示例中，当用户点击 时我们调用这个方法进行路由：

@View({
    template : `
        <span (click)="router.navigate('/video')">video</span> | 
        <span (click)="router.navigate('/music')">music</span>
        <router-outlet></router-outlet>`
})

我们向navigate()方法传入的路径，就是我们通过config()方法配置的路径。这样， Router就根据这个路径，找到匹配的组件，在RouterOutlet上进行激活。

1. 引用路由包

Angular2的路由模块单独打包在router.dev.js，因此首先应该引用这个包：

<script type="text/javascript" src="lib/router.dev.js"></script>

2. 引入路由相关的预定义类型

Angular2的路由模块名为angular2/router，我们从这里引入常用类型：

import {LocationStrategy,Router,RouterOutlet,routerInjectables} from "angular2/router";

3. 声明路由相关依赖类型

在启动组件时，我们需要声明路由相关的依赖类型（即变量：routerInjectables），以便 根注入器可以解析对这些类型的请求：

bootstrap(EzApp,[routerInjectables]);