Angular2中的路由

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 中把这个数据叫作“路由配置”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 可以作用于父级元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

需要特别注意的是:RouterLink 指令仅响应 click 事件(码源分析以后补上),要想响应其他(比如延迟显示)事件,就要用到代码跳转。

7. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

8. 参考文档

Angular2 中的路由(简单总结)

Angular 4.x 路由快速入门学习

作者

鹏叔

发布于

2022-03-06

更新于

2024-08-06

许可协议

评论