标签：
今天我们要讲的是ng2的路由系统。
例子是官网的例子，包含一个“危机中心”和“英雄列表”，都在一个app中，通过路由来控制切换视图。还包含了promise的用法，服务的用法等多个知识点。
源代码：
https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router
运行方法：
在根目录下运行：
http-server
路由并不在ng2中，需要我们额外引入，另外我们需要设置base href，这是个什么东西呢？相当于我们后续所有url的“前缀”，因为我们的app默认是基于"HTML 5 pushState" 风格的路由，所以我们需要加上base href，来保证当我们导航到深层次的url时候，资源可以被正确加载：
index.html
<!-- Add the router library --> <script src="lib/router.dev.js"></script>
<!-- Set the base href --> <script>document.write(‘<base href="‘ + document.location + ‘" />‘);</script>
app/main.ts
import {bootstrap} from ‘angular2/platform/browser‘;
import {ROUTER_PROVIDERS} from ‘angular2/router‘;
import {AppComponent} from ‘./app.component‘;
// Add these symbols to override the `LocationStrategy`
//import {provide} from ‘angular2/core‘;
//import {LocationStrategy,
// HashLocationStrategy} from ‘angular2/router‘;
bootstrap(AppComponent, [ROUTER_PROVIDERS,
//provide(LocationStrategy,
// {useClass: HashLocationStrategy}) // .../#/crisis-center/
]);
这种启动方法采取默认的"HTML 5 pushState" 风格，没有#号，但是存在一个弊端。就是当我们在子路经刷新浏览器时候，会出现404的错误。解决办法可以将所有的路由都指向根目录，但是我们使用了http-server，显然不太方便设置。所以还有另外一种风格，就是老式风格，和ng1一样的，带有#的路由风格，它的启动方法是：
import {bootstrap} from ‘angular2/platform/browser‘;
import {ROUTER_PROVIDERS} from ‘angular2/router‘;
import {AppComponent} from ‘./app.component‘;
// Add these symbols to override the `LocationStrategy`
import {provide} from ‘angular2/core‘;
import {LocationStrategy,
HashLocationStrategy} from ‘angular2/router‘;
bootstrap(AppComponent, [ROUTER_PROVIDERS,
provide(LocationStrategy,
{useClass: HashLocationStrategy}) // .../#/crisis-center/
]);
如此一来，我们的app的路由就全部带上#了，当你刷新页面时候，也不会出现404的错误了，但是url的可读性没有"HTML 5 pushState" 风格好看。
路由的编写很简单，我们只需要在我们的组件中进行配置就行了：
app/app.component.ts
import {Component} from ‘angular2/core‘;
import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router‘;
import {CrisisCenterComponent} from ‘./crisis-center/crisis-center.component‘;
import {HeroListComponent} from ‘./heroes/hero-list.component‘;
import {HeroDetailComponent} from ‘./heroes/hero-detail.component‘;
import {DialogService} from ‘./dialog.service‘;
import {HeroService} from ‘./heroes/hero.service‘;
@Component({
selector: ‘my-app‘,
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="[‘CrisisCenter‘]">Crisis Center</a>
<a [routerLink]="[‘Heroes‘]">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
providers: [DialogService, HeroService],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ // Crisis Center child route
path: ‘/crisis-center/...‘,
name: ‘CrisisCenter‘,
component: CrisisCenterComponent,
useAsDefault: true
},
{path: ‘/heroes‘, name: ‘Heroes‘, component: HeroListComponent},
{path: ‘/hero/:id‘, name: ‘HeroDetail‘, component: HeroDetailComponent},
{path: ‘/disaster‘, name: ‘Asteroid‘, redirectTo: [‘CrisisCenter‘, ‘CrisisDetail‘, {id:3}]}
])
export class AppComponent { }
上述代码我们干了几件事：
好了我们的带有路由的组件编写好了，其实就是个可以切换视图的组件而已，就是这么简单。我们在浏览器中运行程序，点击nav中的heroes，就可以把子视图Heroes渲染出来了。
浏览器路径变为http://localhost:63342/angular2-tutorial/router/index.html/heroes，在原有的基础上加上了/heroes。
当我们导航到heroes视图的时候，我们就进入了另一个子组件，这个组件需要一个heroes服务，里面用到了promise，我们在angular2系列教程（七）Injectable、Promise、Interface、使用服务讲过promise，然我们来温习promise：
app/heroes/hero.service.ts
import {Injectable} from ‘angular2/core‘;
export class Hero {
constructor(public id: number, public name: string) { }
}
@Injectable()
export class HeroService {
getHeroes() { return heroesPromise; }
getHero(id: number | string) {
return heroesPromise
.then(heroes => heroes.filter(h => h.id === +id)[0]);
}
}
var HEROES = [
new Hero(11, ‘Mr. Nice‘),
new Hero(12, ‘Narco‘),
new Hero(13, ‘Bombasto‘),
new Hero(14, ‘Celeritas‘),
new Hero(15, ‘Magneta‘),
new Hero(16, ‘RubberMan‘)
];
var heroesPromise = Promise.resolve(HEROES);
以上代码我们干了几件事：
写了一个HeroService类，包含两个成员函数
温习promise，promise的两种构建方法：
例子（chrome console）：
更详细的的用法，可以看我之前讲的promise：angular2系列教程（七）Injectable、Promise、Interface、使用服务
我们的英雄服务写好了，然我们继续看英雄列表组件，当我们想要点击列表的某一项的时候，我们需要一个参数来导航到指定的英雄详情视图，这时候我们就需要RouteParams了，导航这个动作出发则需要Router服务：
app/heroes/hero-list.component.ts
// TODO SOMEDAY: Feature Componetized like CrisisCenter import {Component, OnInit} from ‘angular2/core‘; import {Hero, HeroService} from ‘./hero.service‘; import {Router, RouteParams} from ‘angular2/router‘; @Component({ template: ` <h2>HEROES</h2> <ul class="items"> <li *ngFor="#hero of heroes" [class.selected]="isSelected(hero)" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> ` }) export class HeroListComponent implements OnInit { heroes: Hero[]; private _selectedId: number; constructor( private _service: HeroService, private _router: Router, routeParams: RouteParams) { this._selectedId = +routeParams.get(‘id‘); } isSelected(hero: Hero) { return hero.id === this._selectedId; } onSelect(hero: Hero) { this._router.navigate( [‘HeroDetail‘, { id: hero.id }] ); } ngOnInit() { this._service.getHeroes().then(heroes => this.heroes = heroes) } }
以上代码，我们干了几件事：
Router服务的使用：this._router.navigate( [‘HeroDetail‘, { id: hero.id }] );
RouteParams服务的使用：this._selectedId = +routeParams.get(‘id‘); 其中routeParams.get(‘id‘)前面那个+代表将其转换为数字类型。
HeroService服务的使用： this._service.getHeroes().then(heroes => this.heroes = heroes)
我们继续看英雄详细视图：
app/heroes/hero-detail.component.ts
import {Component, OnInit} from ‘angular2/core‘;
import {Hero, HeroService} from ‘./hero.service‘;
import {RouteParams, Router} from ‘angular2/router‘;
@Component({
template: `
<h2>HEROES</h2>
<div *ngIf="hero">
<h3>"{{hero.name}}"</h3>
<div>
<label>Id: </label>{{hero.id}}</div>
<div>
<label>Name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
<p>
<button (click)="gotoHeroes()">Back</button>
</p>
</div>
`,
})
export class HeroDetailComponent implements OnInit {
hero: Hero;
constructor(
private _router:Router,
private _routeParams:RouteParams,
private _service:HeroService){}
ngOnInit() {
let id = this._routeParams.get(‘id‘);
this._service.getHero(id).then(hero => this.hero = hero);
}
gotoHeroes() {
let heroId = this.hero ? this.hero.id : null;
// Pass along the hero id if available
// so that the HeroList component can select that hero.
// Add a totally useless `foo` parameter for kicks.
this._router.navigate([‘Heroes‘, {id: heroId, foo: ‘foo‘} ]);
}
}
上述代码，我们仅仅是获取指定的英雄信息，并渲染出来。那么修改英雄信息是如何实现的呢？就是通过引用类型实现的。
我们知道，在js中，对象和数组是引用类型，也就意味着，当我们将某个对象传给别的变量的时候，仅仅是将对象的地址传给了那个变量，当我们修改那个变量时候，其实对象也被修改了。
在这个程序中，我们将hero对象传给this.hero，并将其双向数据绑定到input上：<input [(ngModel)]="hero.name" placeholder="name"/>，这样当我们改变input的值的时候，this.hero被改变，服务中的hero也被改变，因为是引用类型嘛，其实操作的都是一个对象。再有我们的服务是单例模式，所以全局的hero列表都被改变了。
让我们改变input的值，并点击back，我们发现英雄列表视图中的数据也被改变了，这就是引用类型和单例模式的妙用。
当我们点击back返回时候，我们发现url变成了：http://localhost:63342/angular2-tutorial/router/index.html/heroes?id=11&foo=foo。也就是拥有了Query Parameters：?id=11&foo=foo。
为何会这样呢？因为我们指定了参数：this._router.navigate([‘Heroes‘, {id: heroId, foo: ‘foo‘} ]);但是英雄列表视图有没有指定的id和foo的token，所以这两个变量是可选的，所以就自动生成了Query Parameters，好让我们进行select的css重绘。
在英雄详细视图中，我们使用了：id这个token。{path: ‘/hero/:id‘, name: ‘HeroDetail‘, component: HeroDetailComponent}
这就是Route Parameters。它是必须的，我们必须要指定id这个参数。这就是Route Parameters 和 Query Parameters的比较。
这节课我们先讲到这里，下节课我们通过“危机中心”这个例子，继续讲解路由，将包含路由的嵌套、路由的生命周期等众多炫酷功能！
如果您觉得本博客教程帮到了您，就赏颗星吧！
https://github.com/lewis617/angular2-tutorial
angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用
标签：
原文地址：http://www.cnblogs.com/lewis617/p/5352307.html
