在上一篇文章中，我们了解了 Angular 路由的工作机制。现在，我们就动手创建一个支持路由的 Anglular 10 应用，配置路由，并通过路由在组件间导航。
创建应用
- 打开命令行工具，导航到你的工作文件夹，执行下面的命令：
ng new my-app-with-routing
- 在命令执行时，会提示我们回答两个问题。
第一个问题是：Would you like to add Angular routing? (y/N)。输入 y，再按回车，添加 Angula 路由。
第二个问题是：Which stylesheet format would you like to use? (Use arrow keys)。你可以使用箭头键，选择在项目中使用的层叠样式表（CSS）的方式。这里，我们可以直接回车，接受默认选项CSS.
- 回答完两个问题，Angualr CLI 会开始下载和安装依赖包，同时，也会创建一些默认的项目文件。一旦完成上述工作，使用命令行工具，导航到项目的文件夹
my-app-with-routing，运行命令：ng serve，验证项目是否成功建立。
查看 app 目录下的文件，我们可以看到，app-routing.module.ts 文件是之前创建的项目所没有的。
.
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.module.ts
打开这个文件，看到源代码如下：
import { NgModule } from '@angular/core’;
import { Routes, RouterModule } from '@angular/router’;
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在这里我们需要注意四点：
- 在文件头部导入了依赖：
Routes, RouterModule - 创建了一个空的路由数据集合
- 通过
forRoot方法，导入路由器模块 - 重新导出
RouterModule，使得导入AppRoutingModule的其他模块，可以使用RouterModule提供的服务和指令
在 AppModule 的代码，导入了 AppRoutingModule.
import { BrowserModule } from '@angular/platform-browser’;
import { NgModule } from '@angular/core’;
import { AppRoutingModule } from './app-routing.module’;
import { AppComponent } from './app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
配置路由
接下来，我们配置应用的路由。
- 创建两个 Angular 组件：
book-list和book-detail. 在项目的根目录下，执行下面的命令：
ng generate module books
ng generate component books/book-list --module=books
ng generate component books/book-detail --module=books
执行命令后，项目文件夹结构如下所示：
项目结构
- 打开
src/app/app-routing.module.ts，为routes属性 添加两个路由对象。
…
const routes: Routes = [
{ path: 'books', component: BookListComponent},
{ path: 'book', component: BookDetailComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
应用导航
最后，我们使用路由器的指令，实现在应用页面间导航。
- 打开
app.component.html文件，删除文件中的所有内容，然后添加下面的内容：
<router-outlet></router-outlet>
- 在文件顶部，添加一个 HTML 的导航标签元素
nav，并在其中为每一个组件创建一个a标签元素。
<nav>
<a>全部</a>
<a>详情</a>
</nav>
<router-outlet></router-outlet>
- 为每一个
a标签元素增加一个routerLink属性，属性值为路由的path属性的值。
<nav>
<a routerLink="/books">全部图书</a>
<a routerLink="/book">图书详情</a>
</nav>
<router-outlet></router-outlet>
- 最后，添加一些样式。
<nav>
<a routerLink="/books">全部图书</a>
<a routerLink="/book">图书详情</a>
</nav>
<router-outlet></router-outlet>
app.component.css
a {
padding: 10px;
}
.active {
background-color: lightgray;
}
效果展示
全部图书
图书详情
