Angular 2 Cli 向现有项目添加路由

typescript

# 使用Angular CLI向现有项目添加路由

在Angular 2及以上版本中，路由是构建单页应用程序（SPA）的关键部分。Angular提供了强大的路由功能，使开发者能够轻松管理应用程序的导航和视图。

## 1. 初始化Angular CLI

首先，确保已经在系统中安装了Angular CLI。如果尚未安装，可以通过以下命令进行安装：

bash
npm install -g @angular/cli

## 2. 创建新的Angular模块

在现有项目中添加路由之前，需要创建一个新的Angular模块来管理路由。可以使用Angular CLI生成一个新的模块，命令如下：

bash
ng generate module app-routing --flat --module=app

上述命令中，app-routing是新模块的名称，--flat选项表示将文件放在src/app目录中而不是单独的文件夹中，--module=app选项表示将该模块注册到app.module.ts中。

## 3. 配置路由

在新创建的app-routing.module.ts文件中，添加路由配置。例如：

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 添加其他路由配置
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上述配置中，定义了两个路由：home和about，并分别指定了它们对应的组件（HomeComponent和AboutComponent）。需要确保这些组件已经存在或在项目中创建。

## 4. 导入路由模块

回到app.module.ts文件，导入并添加AppRoutingModule：

typescript
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ... 其他模块
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

## 5. 在模板中使用路由链接

在应用的模板文件中，使用routerLink指令创建路由链接。例如：

html
Home
About

上述代码中，通过routerLink指令指定了每个链接对应的路由路径。

## 6. 添加路由出口

在应用的主模板中，添加标签，用于显示当前激活的路由组件。

html
<router-outlet></router-outlet>

这样，当用户点击链接时，相应的组件将会在这个位置显示。

通过上述步骤，你已成功使用Angular CLI向现有项目中添加了路由。这将使你的应用能够更好地管理导航和呈现不同的视图，为用户提供更好的体验。记得根据你的项目需求扩展和修改路由配置。