标签：outer ide people 个数 roo seh 需要 命令 补充
Angular2中建立路由的4个步骤：
1、路由配置：最好新建一个app.toutes.ts文件（能不能用ng命令新建有待调查）
Angular2中路由要解决的是URL与页面的对应关系（比如URL是http://localhost:4200/all-people，那么页面显示的就应该是allPeople画面，URL是http://localhost:4200/first-come，页面显示的就应该是firstCome画面）。
在Angular2中页面是由组件组成的（Angular2中的根模块对应的根组件就表示了整个应用，应用也可以说成只有一个组件，也就是一个页面，这就是单页面应用的由来吧），所以路由解决的是URL与组件的对应关系。
这个需要一个数据，它用来表示url与组件的对应关系，Angular2中把这个数据叫作“路由配置”
// 需要从路由模块中引入Routes类
import { Routes } from ‘@angular/router‘;
// 对于需要用url链接的组件，需要从文件中导入
import { AllPeopleComponent } from ‘./all-people/all-people.component‘;
import { HomePageComponent } from ‘./home-page/home-page.component‘;
// export 导出供其他模块导入 这是一个数组，数组中没一个元素是一个对象，最常见的是这个对象有2个属性，分别是path（对应url）和component（对应组件），直观上url中输入一个路径，在数组中查找path，如果有对应的话就在指定区域显示与path对应的组件。
export const rootRouterConfig: Routes = [
{
path: ‘‘, // http://localhost:4200
component: HomePageComponent
},
{
path: ‘all-people‘, // http://localhost:4200/all-people
component: AllPeopleComponent
},
]
2、在根模块中创建根路由模块。
根路由模块包含了路由所需的使用服务，它以路由配置为参数，调用RouterModule.forRoot()方法来创建。
这里还有路由策略的问题，会在后续再补充
// 在根模块中导入路由配置
import { rootRouterConfig } from ‘./app.routes‘; // 注意没有.ts
// 需要调用RouterModule.forRoot()方法
import { RouterModule } from ‘@angular/router‘;
// 创建路由模块
const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 根路由模块默认提供的路由策略为PathLocationStrategy（另外一个是HashLocationStrategy）。
// PathLocationStrategy路由策略需要一个base路径，设置base路径有2种方式，最简单的是在index.html中设置<base>
// 路由策略：pathLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 路由策略：HashLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true}); @NgModule({ declarations: [],
// 导入路由模块 imports: [rootRouterModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
3、添加组件存放的区域，使用RouterOutlet指令
这个指令就是在页面上预留一个区域，当url改变时匹配路由配置中的path，匹配成功后就将与path对应的component加载到这个区域里。
一般情况下，这个指令是放在根组件中，但也会有子组件路由同一父组件的子组件的情况。
<section class="container"> <router-outlet></router-outlet> </section>
到目前为止，一个简单的路由就基本配置完成了，只要在url中输入正确的path，就能显示对应的组件。
但是，我们总不能跳转页面时还要手动输入url吧，我们的理想方法是通过页面的一些操作（比如点击事件，延迟）改变url，实现path对应的组件显示，这就是路由跳转。
4、路由跳转
如上说的，路由跳转就是为了不要手动改变url，最常见的就是点击事件改变url，实现路由跳转，显示组件。
路由跳转有两种方式：指令跳转和代码跳转。
指令跳转指的是使用RouterlLink指令，该指令接收一个链接参数数组，当事件被触发时，数组中的所有元素与路由配置中的path接收的数组中的元素进行一一对比，全都相等时得以匹配。
RouterLink有一个好的方法，可以指定routerLinkActive = “className”，也就是当RouterLink被激活时可以给相应的html元素添加clas类。神奇地是，routerLinkActive可以作用于父级元素。
<div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a [routerLink]="[‘/all-people‘]">allPeople</a></li> <li><a [routerLink]="[‘/first-come‘]">firstCome</a></li> <li><a [routerLink]="[‘/last-leave‘]">lastLeave</a></li> <li><a [routerLink]="[‘/form‘]">newPerson</a></li> <li><a [routerLink]="[‘/bugManage‘]">bugManage</a></li> </ul> </div>
需要特别注意的是：RouterLink指令仅响应click事件（码源分析以后补上），要想响应其他（比如延迟显示）事件，就要用到代码跳转。
以上是Angular2中路由的基本用法，一些细节和关键的步骤会在后续更新，比如URL带参数，页面如何取得url的值，代码跳转和指令跳转的区别，路由策略的区别，子路由。。。。。
新手，有问题欢迎大家指正。。。
标签：outer ide people 个数 roo seh 需要 命令 补充
原文地址：http://www.cnblogs.com/FireCamp/p/7599119.html
