Angular2中的路由

发表于 2022-03-06 更新于 2024-03-25 分类于 web 阅读次数：本文字数： 3.5k 阅读时长 ≈ 3 分钟

1. Angular2 中的路由

Angular2 中建立路由的 5 个步骤.

2. 安装@angular/router

首先第一件事，我们需要安装 Angular Router。你可以通过运行以下命令进行安装.

1	npm i --save @angular/router

以上命令执行后，将会自动下载 @angular/router 模块到 node_modules 文件夹中。

3. 配置路由

在 src/app 下新建一个 app.routes.ts 文件
Angular2 中路由要解决的是 URL 与页面的对应关系（比如 URL 是http://localhost:4200/all-people，那么页面显示的就应该是allPeople画面，URL是http://localhost:4200/first-come，页面显示的就应该是firstCome画面）。
在 Angular2 中页面是由组件组成的（Angular2 中的根模块对应的根组件就表示了整个应用，应用也可以说成只有一个组件，也就是一个页面，这就是单页面应用的由来吧），所以路由解决的是 URL 与组件的对应关系。

这个需要一个数据，它用来表示 url 与组件的对应关系，Angular2 中把这个数据叫作“路由配置”

import { Routes } from "@angular/router";
import { AllPeopleComponent } from "./all-people/all-people.component";
import { HomePageComponent } from "./home-page/home-page.component";

export const rootRouterConfig: Routes = [
  {
    path: "", // http://localhost:4200
    component: HomePageComponent,
  },
  {
    path: "all-people", // http://localhost:4200/all-people
    component: AllPeopleComponent,
  },
];

4. 加载路由配置

根路由模块包含了路由所需的使用服务，它以路由配置为参数，调用 RouterModule.forRoot()
app.module.ts

import { ModuleWithProviders, NgModule } from "@angular/core";
// 在根模块中导入路由配置
import { rootRouterConfig } from "./app.routes"; // 注意没有.ts
// 需要调用RouterModule.forRoot()方法
import { RouterModule } from "@angular/router";
// 创建路由模块
// 根路由模块默认提供的路由策略为PathLocationStrategy（另外一个是HashLocationStrategy）。
// PathLocationStrategy路由策略需要一个base路径，设置base路径有2种方式，最简单的是在index.html中设置<base>
// 如果要创建HashLocationStrategy 可以使用如下方式创建, 即需要传递options {useHash: true}
// const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true});
const rootRouterModule: ModuleWithProviders<RouterModule> =
  RouterModule.forRoot(rootRouterConfig);

// 然后将路由模块导入AppModule
@NgModule({
  declarations: [],
  imports: [rootRouterModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

5. 添加组件存放的区域

这个指令就是在页面上预留一个区域，当 url 改变时匹配路由配置中的 path，匹配成功后就将与 path 对应的 component 加载到这个区域里。

一般情况下，这个指令是放在根组件中。
app.conponent.html

1
2
3

<section class="container">
  <router-outlet></router-outlet>
</section>

到目前为止，一个简单的路由就基本配置完成了，只要在 url 中输入正确的 path，就能显示对应的组件。

6. 路由跳转

如上说的，路由跳转就是为了不要手动改变 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']" routerLinkActive="active">allPeople</a>
    </li>
    <li>
      <a [routerLink]="['/first-come']" routerLinkActive="active">firstCome</a>
    </li>
    <li>
      <a [routerLink]="['/last-leave']" routerLinkActive="active">lastLeave</a>
    </li>
    <li><a [routerLink]="['/form']" routerLinkActive="active">newPerson</a></li>
    <li>
      <a [routerLink]="['/bugManage']" routerLinkActive="active">bugManage</a>
    </li>
  </ul>
</div>