Angular2 入门 互动版

路由 - 应用步骤

在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. 执行路由

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

@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]);