Angular2中的路由（简单总结）

Posted 2020-10-08

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的值，代码跳转和指令跳转的区别，路由策略的区别，子路由。。。。。

新手，有问题欢迎大家指正。。。