angularjs2 学习笔记（四） 路由

angular2路由是管理angular2应用内部导航的一个重要内容，在angular应用中，很多的组件是通过组合完成一个复杂的应用，不可避免的是我们常会在视图间切换，那么这是就需要使用路由来管理视图间的转换。

路由定义

先看一个简单的路由定义

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

 

 

 

@Component({

    selector: 'my-app',

    template: `

    <h3 class="title">Angular 2 Router Example</h3>

    <nav>

      <a [routerLink]="['Parent']">parent</a>

      <a [routerLink]="['PlanetList']">planetList</a>

      

    </nav>

    <router-outlet></router-outlet>

  `,

    

    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

 

    {

        path: '/contact',

        name: 'Parent',

        component: parentCmp,

        useAsDefault: true

    },

 

    {

        path: '/planetList',

        name: 'PlanetList',

        component: planetList

    }

])

export class RouteExampleAppComponent { }

从这个例子可以看出路由定义的过程

1、  引入路由组件import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'

2、  引入我们所需的导航组件

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

3、  定义组件，配置模板，定义路由

<a [routerLink]="['Parent']">parent</a>定义了一个路由，其中的Parent是我们的一个的一个路由标签，来自下面的路由配置，注意使用驼峰的表达方式。

<router-outlet></router-outlet>定义了视图的显示位置，即导航的模块显示区域

directives: [ROUTER_DIRECTIVES]，引入路由指令

@RouteConfig：用于进行路由配置，其中path只路由的路径，在url中能够看到；name指路由的名称，和上面导航一致；component路由的组件即路由指向的组件。

这样一个简单的路由组件就基本完成

路由使用

import {bootstrap} from 'angular2/platform/browser';

import {ROUTER_PROVIDERS} from 'angular2/router';

import {RouteExampleAppComponent} from "./myRoute";

 

 

bootstrap(RouteExampleAppComponent, [ROUTER_PROVIDERS]); 

这里和前面的bootstrap组件调用不同的是除了引入自定义的组件外还需要注入angular的路由服务。

父子路由

在我们的实际应用中还常遇到这样的一个场景，父组件中包含了一些路由配置，在子组件中同样还有路由配置，有些情况下还需要在父组件通过路由传递数据到子组件中，那么这些情况如何实现呢？

看一个例子

myRoute.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {home} from "./home";

import {childRoute1} from "./childRoute1";

import {childRoute1Detail} from './ChildRoute1Detail'

 

 

@Component({

    selector: 'my-app',

    template: `

    <h3 class="title">Angular 2 Router Example</h3>

    <nav>

      <a [routerLink]="['Home']">Home</a>

      <a [routerLink]="['ChildRoute1']">子路由</a>

      

    </nav>

    <router-outlet></router-outlet>

  `,

    

    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

 

    {

        path: '/',

        name: 'Home',

        component: home,

        useAsDefault: true

        },

 

    {

        path: '/childRoute1',

        name: 'ChildRoute1',

        component: childRoute1

    },

    {

        path: '/childRoute1Detail',

        name: 'ChildRoute1Detail',

        component: childRoute1Detail

        

    }

])

export class RouteExampleAppComponent { }

这是一个父组件，里面加入了路由配置，其中ChildRoute1是一个子路由，而'ChildRoute1Detail'是一个子路由的子路由即孙子路由，这些路由都在父组件中进行了设置。

childRoute.ts

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {Router, RouteParams} from 'angular2/router';

import {childRoute1Detail} from './ChildRoute1Detail'

@Component({

    selector: "childRoute1",

    template: ` this is a route

<a (click)="onSelect()">点击</a>

<a [routerLink]="['ChildRoute1Detail']">子路由明细1</a>

 

`,

        directives: [ROUTER_DIRECTIVES]

})

 

export class childRoute1 {

    constructor(private _router: Router, private _routeParams: RouteParams) {

       

    }

 

    onSelect() {

       this._router.navigate(['ChildRoute1Detail']);

    }

};

这是一个子组件，里面没有路由配置，使用的是父组件中的路由配置，这里的两个链接实现的功能是一样的，都是将孙子组件加载到父组件的router-outlet中。

childRoute1Detail.ts

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

 

@Component({

    selector: "childRoute1Detail",

    template: `<h1>子路由1明细</h1>`

})

 

export class childRoute1Detail { }; 

这是一种应用场景，但这种应用场景显然不是好的选择，因为实际开发中各个模块可能都是单独开发，父组件也可能不知道究竟会有多少个子组件路由，子组件路由交给子组件来配置可能是最好的方式了，那么如何实现呢？

我们需要将父组件myRoute中的不属于它的路由'ChildRoute1Detail'移除，并放在子组件childRoute中，注意父组件不能和子组件有相同的路由配置，否则会出现下面的错误。

在子组件childRoute加入'ChildRoute1Detail'路由时还需要使用useAsDefault: true配置

@RouteConfig([

 

    

    {

        path: '/childRoute1Detail',

        name: 'ChildRoute1Detail',

        component: childRoute1Detail,

        useAsDefault: true

    }

])

否则会出现

同时在父组件的路由路径中需要对子路由加入“…”来标识这是个子路由，否则会出现下面错误

@RouteConfig([

 

    {

        path: '/',

        name: 'Home',

        component: home,

        useAsDefault: true

        },

 

    {

        path: '/childRoute1/...',

        name: 'ChildRoute1',

        component: childRoute1

    }

])

完整的childRoute1.ts

import {childRoute1Detail} from './ChildRoute1Detail'

@Component({

    selector: "childRoute1",

    template: `

 

 this is a route

<a (click)="onSelect()">点击</a>

<a [routerLink]="['ChildRoute1Detail']">子路由明细1</a>

<router-outlet></router-outlet>

`,

        directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

 

    

    {

        path: '/childRoute1Detail',

        name: 'ChildRoute1Detail',

        component: childRoute1Detail,

        useAsDefault: true

    }

])

export class childRoute1 {

    constructor(private _router: Router, private _routeParams: RouteParams) {

       

    }

 

    onSelect() {

       this._router.navigate(['ChildRoute1Detail']);

    }

};

路由参数

通过在routelink或route.navigate中可以指定参数,如下

<a [routerLink]="['ChildRoute1Detail', {param1: param1}]">子路由明细1</a>

this._router.navigate(['ChildRoute1Detail', {param1:this.param1}]);

这是两种方式传递param1参数

接受路由参数使用RouteParams或RouteData

this.param1 = routeParams.get("param1");

使用routedata方式则需要在路由配置中加入data标签，如下

@RouteConfig([

 

    

    {

        path: '/childRoute1Detail',

        name: 'ChildRoute1Detail',

        component: childRoute1Detail,

        data: { param1:"routedata " },

        useAsDefault: true

    }

])

使用时

constructor(data: RouteData) {

        this.param1 = data.get("param1");

    }

这里要注意的是路由参数通常情况下我们不建议传递复杂类型的参数，我们可以传递id参数，然后在通过一个service注入并通过这个id找出该复杂类型的实例 。

另外，在使用路由参数时不能忘记引用

import {Router, RouteParams} from 'angular2/router';

或

import { RouteData} from 'angular2/router';