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的值,代码跳转和指令跳转的区别,路由策略的区别,子路由。。。。。
新手,有问题欢迎大家指正。。。